/* ============================================================================
   Stellae design tokens — THE VISUAL CONTRACT (ADR-0030)

   This file is the single source of every colour, spacing step, type size,
   radius, border and shadow in the product.

   src/Hosts/Stellae.Client/wwwroot/tokens.css is a byte-identical COPY, and
   scripts/audit-design-tokens.sh fails the build if the two differ. This copy
   is the original: change it here, then copy it there.

   A Razor component may use these variables and nothing else. A raw hex
   colour, a raw pixel spacing or a raw font size in a component is a decision
   made outside this contract and fails audit-token-usage.sh.
   ========================================================================= */

:root {
  /* ---- Type -------------------------------------------------------------
     Two families, and the split is load-bearing. Prose is proportional;
     ANY NUMBER A PLAYER COMPARES IS MONOSPACE. This game is a spreadsheet
     with a starfield, and columns of figures that do not align are figures
     that get misread. */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --text-xs:   0.6875rem;  /* 11px — table cells, stamps, chrome */
  --text-sm:   0.8125rem;  /* 13px — the workhorse; most UI text */
  --text-base: 0.9375rem;  /* 15px — body prose, dialog copy */
  --text-lg:   1.125rem;   /* 18px — panel titles */
  --text-xl:   1.5rem;     /* 24px — screen titles, headline figures */
  --text-2xl:  2rem;       /* 32px — the year, the one number always on screen */
  --text-3xl:  2.75rem;    /* 44px — the one figure a detail view is ABOUT */

  /* Display: reserved for a screen's subject — a planet's name, an empire's name.
     Slightly tightened, because at this size default tracking reads as loose. */
  --tracking-tight: -0.02em;

  --leading-tight: 1.25;
  --leading-normal: 1.5;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold: 650;

  --tracking-wide: 0.06em;   /* small-caps labels */

  /* ---- Space ------------------------------------------------------------
     A 4px base. Dense on purpose: this interface shows a lot at once, and
     generous padding would push the map off the screen. */
  --space-0: 0;
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-8: 3rem;      /* 48px */

  /* Detail rhythm. Lists stay dense (--space-1..3); a detail view that a player
     stops and reads gets room. Density everywhere reads as cramped rather than
     serious, and this is the pair of steps that buys the contrast. */
  --space-detail:   1.5rem;
  --space-detail-y: 1.75rem;

  /* ---- Shape ------------------------------------------------------------ */
  /* Radius is depth, not decoration: the further from the page a surface sits,
     the softer its corner. An inline row is square; a floating dialog is not. */
  --radius-sm: 2px;    /* rows, chips, inline */
  --radius-md: 4px;    /* cards, inputs, buttons */
  --radius-lg: 10px;   /* floating panels and dialogs */
  --radius-full: 999px;

  --border-width: 1px;
  --border-width-thick: 2px;

  /* ---- Motion -----------------------------------------------------------
     Short. Nothing in a turn-based game should make a player wait for an
     animation before they can read a number. */
  --duration-fast: 90ms;
  --duration-base: 160ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Layout ----------------------------------------------------------- */
  --panel-width: 23rem;
  --panel-width-wide: 31rem;
  --topbar-height: 3.25rem;
  --statusbar-height: 2.25rem;

  /* Panels that sit OVER the star map are translucent and blurred, because they
     literally float over it and should look like it. Panels in a full-page view
     are opaque -- blur over a solid ground is fog for its own sake. */
  --overlay-blur: 14px;
  --surface-float: rgba(20, 27, 37, 0.86);

  /* ---- Colour: dark is the design ---------------------------------------
     A star map is a dark surface. The light theme below is a real, supported
     theme, not an afterthought — but the dark values are where the design
     decisions were made. */

  /* Surfaces, back to front */
  --bg-void:      #070a10;  /* the map itself; the darkest thing on screen */
  --bg-base:      #0d1219;  /* app background behind panels */
  --bg-surface:   #141b25;  /* panels, cards */
  --bg-raised:    #1b2430;  /* inputs, rows, nested panels */
  --bg-overlay:   #212c3a;  /* dialogs, menus, tooltips */
  --bg-hover:     #26323f;
  --bg-selected:  #1d3448;

  /* Ink */
  --fg-primary:   #e6edf5;  /* headings, figures that matter */
  --fg-secondary: #a8b8c9;  /* body, most UI text */
  --fg-muted:     #6f8299;  /* labels, units, secondary detail */
  --fg-faint:     #4a5b70;  /* disabled, placeholder, grid lines */
  --fg-inverse:   #0d1219;  /* text on an accent fill */

  /* Lines */
  --border-subtle: #1f2a37;
  --border-default:#2b3947;
  --border-strong: #3d4f61;

  /* Accent — the player's own empire, and every primary action.
     Cyan because it reads as instrumentation rather than decoration, and
     because it stays distinct from every empire colour below. */
  --accent:        #38bdf8;
  --accent-hover:  #5accfa;
  --accent-active: #0ea5e9;
  --accent-subtle: #0c2b3d;
  --accent-fg:     #04141d;

  /* Status. Chosen to survive the most common colour-vision deficiencies:
     no red/green pair carries meaning on its own — every status also has an
     icon and a word. */
  --ok:            #4ade80;
  --ok-subtle:     #10281a;
  --warn:          #fbbf24;
  --warn-subtle:   #2e2410;
  --danger:        #f87171;
  --danger-subtle: #33161a;
  --info:          #a78bfa;
  --info-subtle:   #241d3d;

  /* ---- Game semantics ---------------------------------------------------
     These are tokens rather than component styles because they appear on the
     map, in tables, in dialogs and in the replay, and they must mean the same
     thing in all four. */

  --own:          var(--accent);      /* yours */
  --ally:         #34d399;            /* treaty in force */
  --neutral:      #94a3b8;            /* met, no treaty */
  --hostile:      #fb7185;            /* at war */
  --unknown:      #64748b;            /* seen, not identified */

  /* Staleness. Intel carries the year it was learned (`0010`), and how old a
     fact is must be visible without reading the number. */
  --intel-current: var(--fg-primary);
  --intel-recent:  #9fb3c8;
  --intel-stale:   #7b8ea3;
  --intel-ancient: #5d6f84;

  /* Minerals. Fixed hues so a column of ironium is the same colour on every
     screen in the game. */
  --ironium:    #7dd3fc;
  --boranium:   #86efac;
  --germanium:  #fcd34d;
  --resources:  #c4b5fd;

  /* Map overlays, at map opacity */
  --scan-own:      rgba(56, 189, 248, 0.13);
  --scan-pen:      rgba(167, 139, 250, 0.13);
  --minefield:     rgba(248, 113, 113, 0.11);
  --minefield-line:rgba(248, 113, 113, 0.42);
  --route:         #38bdf8;
  --route-enemy:   #fb7185;

  /* Eight empire colours. Distinguishable from each other AND from the status
     colours above, because on the map they sit side by side. */
  --empire-1: #38bdf8;
  --empire-2: #f472b6;
  --empire-3: #4ade80;
  --empire-4: #fbbf24;
  --empire-5: #a78bfa;
  --empire-6: #fb923c;
  --empire-7: #2dd4bf;
  --empire-8: #e879f9;

  /* ---- Elevation --------------------------------------------------------
     Restrained. On a dark surface, shadow reads as blur; separation comes
     mostly from the border and the surface step. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.48);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.6);
  --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent);

  /* Planet bodies. Ice and atmosphere are tokens like everything else, so a
     frozen world's cap is the same white as every other frozen world's cap
     (ADR-0034). The band base colours live in the appearance rule, not here --
     they are computed, and a token would imply they were chosen per planet. */
  --planet-ice:   #eaf4fb;
  --planet-shade: rgba(0, 0, 0, 0.68);
  --planet-lit:   rgba(255, 255, 255, 0.20);
}

/* ---- Light theme --------------------------------------------------------
   Only the tokens change; no component knows which theme it is in. The map
   keeps a dark void even in light mode — a white starfield is unreadable, and
   that is a design decision rather than an oversight. */
:root[data-theme="light"] {
  --bg-void:      #0b1017;
  --bg-base:      #f1f4f8;
  --bg-surface:   #ffffff;
  --bg-raised:    #f5f7fa;
  --bg-overlay:   #ffffff;
  --bg-hover:     #e8edf3;
  --bg-selected:  #dceaf5;

  --fg-primary:   #0f1a26;
  --fg-secondary: #33455a;
  --fg-muted:     #5f7285;
  --fg-faint:     #9aabbd;
  --fg-inverse:   #ffffff;

  --border-subtle: #e2e8ef;
  --border-default:#cdd8e3;
  --border-strong: #a9b8c7;

  --accent:        #0284c7;
  --accent-hover:  #0369a1;
  --accent-active: #075985;
  --accent-subtle: #e0f2fe;
  --accent-fg:     #ffffff;

  --ok:            #15803d;
  --ok-subtle:     #dcfce7;
  --warn:          #b45309;
  --warn-subtle:   #fef3c7;
  --danger:        #b91c1c;
  --danger-subtle: #fee2e2;
  --info:          #6d28d9;
  --info-subtle:   #ede9fe;

  --ally:     #047857;
  --neutral:  #52637a;
  --hostile:  #be123c;
  --unknown:  #64748b;

  --intel-current: #0f1a26;
  --intel-recent:  #3d4f63;
  --intel-stale:   #64748b;
  --intel-ancient: #94a3b8;

  --ironium:   #0369a1;
  --boranium:  #15803d;
  --germanium: #a16207;
  --resources: #6d28d9;

  --shadow-sm: 0 1px 2px rgba(15, 26, 38, 0.08);
  --shadow-md: 0 4px 14px rgba(15, 26, 38, 0.13);
  --shadow-lg: 0 18px 44px rgba(15, 26, 38, 0.20);

  /* The map keeps its dark void in the light theme, so a panel floating over it
     stays dark too -- a pale panel over a starfield loses the map behind it. */
  --surface-float: rgba(20, 27, 37, 0.86);
  --planet-ice:   #eaf4fb;
  --planet-shade: rgba(0, 0, 0, 0.68);
  --planet-lit:   rgba(255, 255, 255, 0.20);
}