/* ==========================================================================
   GeoBrown Design System — Colors & Type
   Municipalidad de Almirante Brown · GIS colaborativo
   ========================================================================== */

/* Google Fonts — loaded once at top of app */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@600;700&family=Source+Sans+3:wght@400;600;700&family=Fira+Code:wght@400;500&display=swap');

/* ============================================================
   BRAND TOKENS (raw)
   ============================================================ */
:root {
  /* Brand — extraído de brown.gob.ar */
  --brown-primary:        #008cdd;
  --brown-primary-hover:  #006ba8;
  --brown-primary-light:  #E7F6FF;
  --brown-secondary:      #6aacdb;
  --brown-accent-subtle:  #b6c6d6;
  --brown-dark-navy:      #0d1b2a;
  --brown-dark-surface:   #283D4F;
  --brown-dark-overlay:   #3a5066;

  /* Neutral scale */
  --neutral-50:  #f9fafb;
  --neutral-100: #f3f4f6;
  --neutral-200: #e5e7eb;
  --neutral-300: #d1d5db;
  --neutral-400: #9ca3af;
  --neutral-500: #6b7280;
  --neutral-600: #4b5563;
  --neutral-700: #374151;
  --neutral-800: #1f2937;
  --neutral-900: #111827;

  /* Semantic */
  --success: #16a34a;
  --warning: #d97706;
  --danger:  #dc2626;
  --info:    #0891b2;

  /* Typography — families */
  --font-display: 'Bebas Neue', 'Impact', sans-serif;
  --font-heading: 'Montserrat', 'Segoe UI', sans-serif;
  --font-body:    'Source Sans 3', 'Source Sans Pro', 'Segoe UI', sans-serif;
  --font-mono:    'Fira Code', 'Consolas', 'Monaco', monospace;

  /* Type scale */
  --fs-display-xl: 64px;
  --fs-display-lg: 48px;
  --fs-h1:         36px;
  --fs-h2:         28px;
  --fs-h3:         22px;
  --fs-h4:         18px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --fs-mono:       14px;

  /* Spacing — múltiplos de 4px */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;
  --radius-brown: 20px 0px 20px 0px;  /* Signature asimétrico */

  /* Shadows — light */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  --shadow-brown: 0 0 10px rgba(0, 0, 0, 0.20);  /* Signature omnidireccional */

  /* Breakpoints (informativos) */
  --bp-sm:  576px;
  --bp-md:  768px;
  --bp-lg:  992px;
  --bp-xl:  1200px;
  --bp-xxl: 1400px;
}

/* ============================================================
   SEMANTIC THEME — LIGHT (default)
   ============================================================ */
:root {
  --bg-base:        #ffffff;
  --bg-elevated:    #f9fafb;
  --bg-overlay:     #ffffff;
  --bg-subtle:      #f3f4f6;

  --text-primary:    #111827;
  --text-secondary:  #374151;
  --text-muted:      #6b7280;
  --text-on-primary: #ffffff;

  --border-default: #e5e7eb;
  --border-strong:  #d1d5db;

  --brand-primary: #008cdd;
  --brand-hover:   #006ba8;
  --brand-subtle:  #E7F6FF;

  /* Layer status semantic tokens */
  --layer-draft:             #9ca3af;
  --layer-private:           #008cdd;
  --layer-shared:            #6aacdb;
  --layer-in-review:         #d97706;
  --layer-published-public:  #16a34a;
  --layer-published-private: #0891b2;
  --layer-archived:          #6b7280;

  /* Shadow signature override (dark-mode redefines) */
  --shadow-signature: 0 0 10px rgba(0, 0, 0, 0.20);

  color-scheme: light;
}

/* ============================================================
   SEMANTIC THEME — DARK (system + manual)
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-base:      #0d1b2a;
    --bg-elevated:  #283D4F;
    --bg-overlay:   #3a5066;
    --bg-subtle:    #1a2a3a;

    --text-primary:    #f9fafb;
    --text-secondary:  #d1d5db;
    --text-muted:      #9ca3af;
    --text-on-primary: #ffffff;

    --border-default: #374151;
    --border-strong:  #4b5563;

    --brand-primary: #33a3e3;
    --brand-hover:   #66bce9;
    --brand-subtle:  #1a3a4f;

    --layer-draft:             #d1d5db;
    --layer-private:           #33a3e3;
    --layer-shared:            #93c8e8;
    --layer-in-review:         #fbbf24;
    --layer-published-public:  #4ade80;
    --layer-published-private: #22d3ee;
    --layer-archived:          #9ca3af;

    --shadow-signature: 0 0 10px rgba(0, 0, 0, 0.50);

    color-scheme: dark;
  }
}

[data-theme="dark"] {
  --bg-base:      #0d1b2a;
  --bg-elevated:  #283D4F;
  --bg-overlay:   #3a5066;
  --bg-subtle:    #1a2a3a;

  --text-primary:    #f9fafb;
  --text-secondary:  #d1d5db;
  --text-muted:      #9ca3af;
  --text-on-primary: #ffffff;

  --border-default: #374151;
  --border-strong:  #4b5563;

  --brand-primary: #33a3e3;
  --brand-hover:   #66bce9;
  --brand-subtle:  #1a3a4f;

  --layer-draft:             #d1d5db;
  --layer-private:           #33a3e3;
  --layer-shared:            #93c8e8;
  --layer-in-review:         #fbbf24;
  --layer-published-public:  #4ade80;
  --layer-published-private: #22d3ee;
  --layer-archived:          #9ca3af;

  --shadow-signature: 0 0 10px rgba(0, 0, 0, 0.50);

  color-scheme: dark;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY — applied elements
   ============================================================ */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--text-secondary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
}

.display-xl {
  font-family: var(--font-display);
  font-size: clamp(40px, 8vw, 64px);
  line-height: 1.10;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--text-primary);
}
.display-lg {
  font-family: var(--font-display);
  font-size: clamp(32px, 6vw, 48px);
  line-height: 1.15;
  font-weight: 400;
  color: var(--text-primary);
}

h1, .h1 { font-family: var(--font-heading); font-size: var(--fs-h1); line-height: 1.20; font-weight: 700; color: var(--text-primary); }
h2, .h2 { font-family: var(--font-heading); font-size: var(--fs-h2); line-height: 1.30; font-weight: 600; color: var(--text-primary); }
h3, .h3 { font-family: var(--font-heading); font-size: var(--fs-h3); line-height: 1.35; font-weight: 600; color: var(--text-primary); }
h4, .h4 { font-family: var(--font-heading); font-size: var(--fs-h4); line-height: 1.40; font-weight: 600; color: var(--text-primary); }

p, .body { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.55; max-width: 65ch; }
.body-lg { font-size: var(--fs-body-lg); line-height: 1.50; }
.body-sm { font-size: var(--fs-body-sm); line-height: 1.50; }
.caption { font-size: var(--fs-caption); line-height: 1.40; color: var(--text-muted); }

code, .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: 1.50;
}

.uppercase-badge {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  font-family: var(--font-body);
}