/* ============================================================
   Zonke Energy — Design Tokens
   Colors, typography and surface vars
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Archivo+Black&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* --------------------------------------------------------
     CORE BRAND COLORS
     -------------------------------------------------------- */

  /* The warm near-black that anchors the brand. Sampled from the
     wordmark background — NOT pure #000, it carries a touch of warmth.
     Use for hero backgrounds, app top bars, brand surfaces. */
  --zonke-black:        #1F1C18;
  --zonke-black-soft:   #2A2620;
  --zonke-black-elev:   #34302A;   /* a hair lighter, for cards on dark */

  /* Sun yellow — the "O" in the mark. This is THE accent of the brand.
     Use for highlights, calls-to-action on dark, the dot in any sun mark. */
  --zonke-sun:          #F4C027;
  --zonke-sun-deep:     #D9A30E;   /* pressed / hover-deeper state */
  --zonke-sun-soft:     #FBE6A4;   /* tinted backgrounds, success-on-yellow */

  /* Equipment orange — sampled from the real-world meter housings
     deployed in settlements. Secondary brand accent; reserve for
     hardware/product references, charts, dataviz. */
  --zonke-orange:       #E97819;
  --zonke-orange-deep:  #B95B0C;

  /* Sky — photography backgrounds in Cape Town are dominated by
     a clear blue sky. Soft secondary that recalls the imagery. */
  --zonke-sky:          #6BA9D6;
  --zonke-sky-deep:     #3E7CA8;

  /* Earth — the sand/dust palette of informal-settlement
     ground textures. Use for warm neutrals, paper-like surfaces. */
  --zonke-earth:        #E8DDCB;
  --zonke-earth-deep:   #B8A887;

  /* --------------------------------------------------------
     NEUTRALS — warm-leaning grey scale
     The grays in the brand should NEVER feel cold. Each step has
     a tiny touch of the same warmth as --zonke-black.
     -------------------------------------------------------- */
  --neutral-0:    #FFFFFF;
  --neutral-50:   #FAF8F5;
  --neutral-100:  #F2EFE9;
  --neutral-200:  #E5E1D9;
  --neutral-300:  #D1CCC2;
  --neutral-400:  #A39E94;
  --neutral-500:  #7A7569;
  --neutral-600:  #56524A;
  --neutral-700:  #3D3A34;
  --neutral-800:  #2A2620;
  --neutral-900:  #1F1C18;

  /* --------------------------------------------------------
     SEMANTIC — system colors for product surfaces
     -------------------------------------------------------- */
  --semantic-on:        #3DA85A;
  --semantic-on-bg:     #E4F2E6;
  --semantic-warn:      #E1A30B;
  --semantic-warn-bg:   #FBEEC9;
  --semantic-off:       #C0392B;
  --semantic-off-bg:    #F8E1DD;
  --semantic-info:      #3E7CA8;
  --semantic-info-bg:   #E0EDF6;

  /* --------------------------------------------------------
     SURFACE TOKENS — what to actually USE in components
     -------------------------------------------------------- */
  --bg-page:        var(--neutral-50);
  --bg-card:        var(--neutral-0);
  --bg-card-alt:    var(--neutral-100);
  --bg-inverted:    var(--zonke-black);
  --bg-inverted-2:  var(--zonke-black-soft);

  --fg-1:           var(--neutral-900);   /* primary text */
  --fg-2:           var(--neutral-700);   /* secondary text */
  --fg-3:           var(--neutral-500);   /* tertiary / meta */
  --fg-on-dark:     var(--neutral-0);
  --fg-on-dark-2:   var(--neutral-300);
  --fg-accent:      var(--zonke-sun-deep);

  --border-1:       var(--neutral-200);   /* dividers */
  --border-2:       var(--neutral-300);   /* card edges */
  --border-strong:  var(--neutral-700);

  /* --------------------------------------------------------
     TYPOGRAPHY
     Display: Archivo Black — geometric, heavy, all-caps friendly.
     Body:    Archivo (400–700) — same family, harmonious, very legible.
     Mono:    JetBrains Mono — IDs, meter codes, data tables.
     -------------------------------------------------------- */
  --font-display: 'Archivo Black', 'Archivo', system-ui, sans-serif;
  --font-sans:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --fs-display-xl: 88px;
  --fs-display-l:  64px;
  --fs-display-m:  48px;
  --fs-h1:         40px;
  --fs-h2:         32px;
  --fs-h3:         24px;
  --fs-h4:         20px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --fs-overline:   11px;

  --lh-tight:      1.05;
  --lh-snug:       1.2;
  --lh-normal:     1.45;
  --lh-relaxed:    1.6;

  --ls-display:    -0.02em;
  --ls-h:          -0.01em;
  --ls-body:       0;
  --ls-overline:   0.12em;

  /* --------------------------------------------------------
     SPACING / RADII / ELEVATION
     -------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(31,28,24,0.06), 0 1px 1px rgba(31,28,24,0.04);
  --shadow-2: 0 4px 12px rgba(31,28,24,0.08), 0 2px 4px rgba(31,28,24,0.04);
  --shadow-3: 0 12px 32px rgba(31,28,24,0.12), 0 4px 8px rgba(31,28,24,0.06);
  --shadow-glow: 0 0 0 4px rgba(244,192,39,0.25);

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Use these instead of raw font-size everywhere.
   ============================================================ */

.zk-display-xl { font: 800 var(--fs-display-xl) / var(--lh-tight) var(--font-display); letter-spacing: var(--ls-display); }
.zk-display-l  { font: 800 var(--fs-display-l)  / var(--lh-tight) var(--font-display); letter-spacing: var(--ls-display); }
.zk-display-m  { font: 800 var(--fs-display-m)  / var(--lh-snug)  var(--font-display); letter-spacing: var(--ls-display); }

.zk-h1 { font: 700 var(--fs-h1) / var(--lh-snug) var(--font-sans); letter-spacing: var(--ls-h); }
.zk-h2 { font: 700 var(--fs-h2) / var(--lh-snug) var(--font-sans); letter-spacing: var(--ls-h); }
.zk-h3 { font: 600 var(--fs-h3) / var(--lh-snug) var(--font-sans); letter-spacing: var(--ls-h); }
.zk-h4 { font: 600 var(--fs-h4) / var(--lh-normal) var(--font-sans); }

.zk-body-lg { font: 400 var(--fs-body-lg) / var(--lh-relaxed) var(--font-sans); }
.zk-body    { font: 400 var(--fs-body)    / var(--lh-relaxed) var(--font-sans); }
.zk-body-sm { font: 400 var(--fs-body-sm) / var(--lh-normal)  var(--font-sans); }
.zk-caption { font: 500 var(--fs-caption) / var(--lh-normal)  var(--font-sans); color: var(--fg-3); }

.zk-overline {
  font: 700 var(--fs-overline) / 1 var(--font-sans);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--fg-3);
}

.zk-mono { font-family: var(--font-mono); font-feature-settings: 'tnum' 1; }
.zk-data { font: 500 var(--fs-body-sm) / var(--lh-normal) var(--font-mono); font-feature-settings: 'tnum' 1; }