/* ============================================================
   Tactizen design tokens
   ------------------------------------------------------------
   Single source of truth for colour, type, radius, elevation
   and motion. Loaded first in layouts/base.html.

   Phase A (extraction) rule: every token below records a value
   that ALREADY existed in the codebase. Nothing here changes how
   any page renders. Where the codebase currently holds more
   values than a scale should have, the surplus is kept and
   marked "PHASE B" for the pass that actually reduces it.

   Naming
     --tz-<hue>-<step>       a palette colour
     --tz-<hue>-<step>-rgb   the same colour as an "r, g, b" triple,
                             for rgba(var(--tz-green-500-rgb), .3)
     --tz-<role>             a semantic alias pointing at a palette token

   Use the semantic aliases in new work. The palette tokens exist
   so the literal colours already in the templates have somewhere
   to point.
   ============================================================ */

:root {

  /* ---------------------------------------------------------
     1. SURFACES
     The bespoke navy ramp the app is built on. Darkest first.
     --------------------------------------------------------- */
  --tz-surface-base:   #0a0e1a;   /* root canvas                    */
  --tz-surface-900:    #0f1419;   /* panel                          */
  --tz-surface-800:    #1a1f2e;   /* raised panel, dropdown         */
  --tz-surface-700:    #23283a;   /* elevated / inset               */
  --tz-surface-600:    #3b4257;   /* hover fill, divider            */

  --tz-surface-base-rgb: 10, 14, 26;
  --tz-surface-900-rgb:  15, 20, 25;
  --tz-surface-800-rgb:  26, 31, 46;

  /* Slate, used mostly as translucent card fill */
  --tz-slate-200:      #e2e8f0;
  --tz-slate-400:      #94a3b8;
  --tz-slate-500:      #64748b;
  --tz-slate-600:      #475569;
  --tz-slate-900:      #0f172a;   /* the rgba(15,23,42,.6) card fill */

  --tz-slate-400-rgb:  148, 163, 184;
  --tz-slate-500-rgb:  100, 116, 139;
  --tz-slate-900-rgb:  15, 23, 42;

  /* ---------------------------------------------------------
     2. NEUTRALS
     --------------------------------------------------------- */
  --tz-white:          #ffffff;
  --tz-black:          #000000;
  --tz-gray-200:       #e5e7eb;
  --tz-gray-300:       #d1d5db;
  --tz-gray-400:       #9ca3af;
  --tz-gray-500:       #6b7280;
  --tz-gray-600:       #4b5563;
  --tz-gray-700:       #374151;
  --tz-gray-800:       #1f2937;
  --tz-gray-900:       #111827;

  --tz-white-rgb:      255, 255, 255;
  --tz-black-rgb:      0, 0, 0;
  --tz-gray-400-rgb:   156, 163, 175;
  --tz-gray-500-rgb:   107, 114, 128;

  /* ---------------------------------------------------------
     3. HUES
     Tailwind-aligned steps, because that is what the templates
     were reaching for by hand.
     --------------------------------------------------------- */

  /* Green - currently carries almost everything. See PHASE B. */
  --tz-green-300:      #86efac;
  --tz-green-400:      #4ade80;
  --tz-green-500:      #22c55e;   /* 1,065 hex + 2,641 rgba uses */
  --tz-green-600:      #16a34a;
  --tz-green-700:      #15803d;
  --tz-green-900:      #14532d;

  --tz-green-300-rgb:  134, 239, 172;
  --tz-green-400-rgb:  74, 222, 128;
  --tz-green-500-rgb:  34, 197, 94;
  --tz-green-600-rgb:  22, 163, 74;
  --tz-green-900-rgb:  20, 83, 45;

  --tz-emerald-400:    #34d399;
  --tz-emerald-500:    #10b981;
  --tz-emerald-400-rgb: 52, 211, 153;
  --tz-emerald-500-rgb: 16, 185, 129;

  /* Amber / yellow */
  --tz-amber-400:      #fbbf24;
  --tz-amber-500:      #f59e0b;
  --tz-amber-600:      #d97706;
  --tz-yellow-400:     #facc15;
  --tz-yellow-500:     #eab308;
  --tz-yellow-600:     #ca8a04;
  --tz-gold:           #ffd700;

  --tz-amber-400-rgb:  251, 191, 36;
  --tz-amber-500-rgb:  245, 158, 11;
  --tz-yellow-500-rgb: 234, 179, 8;
  --tz-gold-rgb:       255, 215, 0;

  /* Red */
  --tz-red-300:        #fca5a5;
  --tz-red-400:        #f87171;
  --tz-red-500:        #ef4444;
  --tz-red-600:        #dc2626;
  --tz-red-700:        #b91c1c;
  --tz-red-800:        #991b1b;

  --tz-red-400-rgb:    248, 113, 113;
  --tz-red-500-rgb:    239, 68, 68;
  --tz-red-600-rgb:    220, 38, 38;

  /* Blue */
  --tz-blue-300:       #93c5fd;
  --tz-blue-400:       #60a5fa;
  --tz-blue-500:       #3b82f6;
  --tz-blue-600:       #2563eb;
  --tz-blue-700:       #1d4ed8;

  --tz-blue-400-rgb:   96, 165, 250;
  --tz-blue-500-rgb:   59, 130, 246;

  /* Violet / purple */
  --tz-violet-300:     #c4b5fd;
  --tz-violet-400:     #a78bfa;
  --tz-violet-500:     #8b5cf6;
  --tz-violet-600:     #7c3aed;
  --tz-purple-400:     #c084fc;
  --tz-purple-500:     #a855f7;
  --tz-purple-600:     #9333ea;

  --tz-violet-500-rgb: 139, 92, 246;
  --tz-purple-400-rgb: 192, 132, 252;
  --tz-purple-500-rgb: 168, 85, 247;
  --tz-purple-600-rgb: 147, 51, 234;

  /* Cyan */
  --tz-cyan-300:       #67e8f9;
  --tz-cyan-400:       #22d3ee;
  --tz-cyan-500:       #06b6d4;
  --tz-cyan-600:       #0891b2;

  --tz-cyan-400-rgb:   34, 211, 238;
  --tz-cyan-500-rgb:   6, 182, 212;

  /* Orange, indigo, lime, rose */
  --tz-orange-400:     #fb923c;
  --tz-orange-500:     #f97316;
  --tz-indigo-400:     #818cf8;
  --tz-indigo-500:     #6366f1;
  --tz-indigo-500-rgb: 99, 102, 241;
  --tz-lime-400:       #a3e635;
  --tz-rose-400-rgb:   251, 113, 133;

  /* ---------------------------------------------------------
     4. SEMANTIC ROLES
     Aliases only - they resolve to the palette above. New work
     should use these so PHASE B can re-point them without
     touching call sites.
     --------------------------------------------------------- */
  --tz-bg:             var(--tz-surface-base);
  --tz-panel:          var(--tz-surface-900);
  --tz-panel-raised:   var(--tz-surface-800);

  --tz-text:           var(--tz-white);
  --tz-text-muted:     var(--tz-gray-400);
  --tz-text-dim:       var(--tz-gray-500);
  --tz-text-faint:     var(--tz-gray-600);

  --tz-accent:         var(--tz-green-500);   /* the house green   */
  --tz-accent-bright:  var(--tz-green-400);
  --tz-accent-deep:    var(--tz-green-600);
  --tz-accent-rgb:     var(--tz-green-500-rgb);

  --tz-success:        var(--tz-green-500);
  --tz-warning:        var(--tz-amber-400);
  --tz-danger:         var(--tz-red-500);
  --tz-info:           var(--tz-blue-500);

  /* Domain accents. Tactizen has four modes and they used to render
     in one colour, so nothing told you what kind of screen you were
     on. Each mode now owns a hue.

     To revert the whole domain-colour idea, point all four back at
     var(--tz-accent) - nothing else needs to change. */
  --tz-domain-economy:        var(--tz-green-500);   /* build, produce, earn */
  --tz-domain-economy-rgb:    var(--tz-green-500-rgb);
  --tz-domain-war:            var(--tz-red-500);     /* wars, battles, units */
  --tz-domain-war-rgb:        var(--tz-red-500-rgb);
  --tz-domain-government:     var(--tz-violet-500);  /* laws, congress, votes */
  --tz-domain-government-rgb: var(--tz-violet-500-rgb);
  --tz-domain-market:         var(--tz-gold);        /* trade and exchange */
  --tz-domain-market-rgb:     var(--tz-gold-rgb);
  --tz-domain-community:      var(--tz-amber-400);   /* press, feeds, people */
  --tz-domain-community-rgb:  var(--tz-amber-400-rgb);

  /* A section sets --tz-domain / --tz-domain-rgb once; every accent
     inside it inherits. Defaults to economy green. */
  --tz-domain:     var(--tz-domain-economy);
  --tz-domain-rgb: var(--tz-domain-economy-rgb);

  --tz-border:         rgba(var(--tz-green-500-rgb), 0.2);
  --tz-border-strong:  rgba(var(--tz-green-500-rgb), 0.4);

  /* ---------------------------------------------------------
     5. TYPOGRAPHY
     --------------------------------------------------------- */
  --tz-font-display:   'Orbitron', sans-serif;      /* headings, HUD numerals */
  --tz-font-ui:        'Rajdhani', sans-serif;      /* dense UI labels        */
  --tz-font-body:      'Poppins', sans-serif;       /* prose, default         */
  --tz-font-mono:      'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Scale. Note --tz-text-base: the app's most common size is
     0.85rem / 13.6px, not 16px.

     24 distinct sizes are still in use across the templates. These
     11 steps are the target, and new work should use them - but the
     remaining sizes are NOT being snapped in a blind global sweep.
     Unlike radius, moving a font size reflows text, and several of
     the live clusters (0.8, 0.9, 1.0) sit a full step away from the
     nearest target. They get folded in per page, with the page on
     screen, as each one is brought onto the component set.

     Because these are tokens, raising the whole scale later - the
     13.6px base text is worth revisiting - is a one-line edit. */
  --tz-text-2xs:       0.65rem;
  --tz-text-xs:        0.7rem;
  --tz-text-sm:        0.75rem;
  --tz-text-base:      0.85rem;
  --tz-text-md:        0.95rem;
  --tz-text-lg:        1.1rem;
  --tz-text-xl:        1.25rem;
  --tz-text-2xl:       1.5rem;
  --tz-text-3xl:       2rem;
  --tz-text-4xl:       2.5rem;
  --tz-text-5xl:       3rem;

  --tz-weight-normal:  400;
  --tz-weight-medium:  500;
  --tz-weight-semi:    600;
  --tz-weight-bold:    700;
  --tz-weight-heavy:   800;
  --tz-weight-black:   900;

  --tz-tracking-wide:  0.05em;
  --tz-tracking-hud:   0.1em;   /* the uppercase Orbitron heading */

  /* ---------------------------------------------------------
     6. RADIUS
     Five steps, down from the eighteen distinct values the app
     had grown. Nothing here moved more than 4px except the 24px
     hero card, which kept its own step.
       sm  <- 2, 3, 4px, 0.25rem
       md  <- 5, 6, 7, 8, 9px, 0.375rem, 0.5rem
       lg  <- 10, 12px, 0.75rem
       xl  <- 14, 16, 20px, 1rem
       2xl <- 24px, 1.5rem
     `50%` is left alone - it means "circle", not a radius step.
     --------------------------------------------------------- */
  --tz-radius-sm:      4px;
  --tz-radius-md:      8px;
  --tz-radius-lg:      12px;
  --tz-radius-xl:      16px;
  --tz-radius-2xl:     24px;
  --tz-radius-pill:    999px;

  /* ---------------------------------------------------------
     7. ELEVATION
     Taken from the shadows actually in use. The -glow family is
     separate because the app leans on coloured glow as its main
     depth cue.
     --------------------------------------------------------- */
  --tz-shadow-sm:      0 2px 10px rgba(var(--tz-black-rgb), 0.3);
  --tz-shadow-md:      0 4px 20px rgba(var(--tz-black-rgb), 0.4);
  --tz-shadow-lg:      0 8px 40px rgba(var(--tz-black-rgb), 0.5);

  --tz-glow-sm:        0 0 10px rgba(var(--tz-accent-rgb), 0.2);
  --tz-glow-md:        0 0 15px rgba(var(--tz-accent-rgb), 0.3);
  --tz-glow-lg:        0 0 20px rgba(var(--tz-accent-rgb), 0.5);
  --tz-glow-lift:      0 4px 15px rgba(var(--tz-accent-rgb), 0.3);

  --tz-shadow-card:       var(--tz-shadow-md);
  --tz-shadow-card-hover: var(--tz-shadow-md), var(--tz-glow-md);

  --tz-focus-ring:     0 0 0 0.25rem rgba(var(--tz-accent-rgb), 0.25);

  /* ---------------------------------------------------------
     8. MOTION
     --------------------------------------------------------- */
  --tz-dur-fast:       0.15s;
  --tz-dur-base:       0.2s;
  --tz-dur-slow:       0.3s;
  --tz-dur-slower:     0.5s;

  --tz-ease:           ease;
  --tz-ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --tz-ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);

  --tz-transition:     all var(--tz-dur-slow) var(--tz-ease);

  /* ---------------------------------------------------------
     9. LAYOUT
     --------------------------------------------------------- */
  --tz-container:      1400px;
  --tz-z-dropdown:     1000;
  --tz-z-sticky:       1020;
  --tz-z-nav:          1030;
  --tz-z-modal:        1050;
  --tz-z-toast:        1080;
}