/* ============================================================
   Celeritas Studio — the tokens, on their own
   ============================================================
   Split out of system.css so a document can take the values
   without the component layer.

   The module apps need exactly that. They run in same-origin
   iframes and load the ui-* kit (dialog, menu, toast, calendar,
   prompts), all of which is written against --s-*; inside the
   frame those variables did not exist, so every one of those
   components was drawing with nothing behind its colours. But
   the apps also carry 298 elements called .row, 152 called
   .card and 80 called .label of their own, so handing them the
   whole of system.css would have rewritten their layouts.

   Tokens here, components there. system.css @imports this file,
   so every page that already links system.css is unchanged.
   ============================================================ */

:root {
  /* ---------- Surfaces: four steps, HeroUI's lightness, the brand's navy ----------
     The first ramp here kept HeroUI's lightness steps and only a trace of
     the navy — #070b14 is a hair off black — so a page that showed a lot of
     bare background read as black, while the landing page (which lays a
     navy glow over the same value) and the invoice list (mostly card
     surface, little page) read as the brand's blue. Same steps, the hue
     moved to where the brand actually is. Every ink below was re-checked
     against every one of these: 4.5 or better on all four. */
  --s-bg:          #0b1424;   /* the page itself */
  --s-1:           #121d33;   /* a card on the page */
  --s-2:           #182640;   /* a card on a card, table head */
  --s-3:           #1f2f4b;   /* raised: hover, active, chips */
  --s-line:        #2a3b5a;   /* the hairline between them */
  --s-line-strong: #3b4e70;

  /* ---------- Content ---------- */
  --s-fg:          #f7f9fc;
  --s-fg-muted:    #98a2b3;   /* labels, captions, table heads */
  /* The quietest legible text: breadcrumbs, captions, table footnotes.
     Lifted once more with the navy ramp so it still clears 4.5 on the
     third surface, where the track ranker showed it 59 times over. */
  --s-fg-subtle:   #8b98ae;
  --s-fg-disabled: #47526444;

  /* ---------- Accent and status ---------- */
  --s-accent:      #409ed7;   /* the brand blue, in HeroUI's accent slot */
  --s-accent-hi:   #5dbdf0;
  --s-accent-fg:   #04101f;   /* text on an accent fill */
  --s-accent-soft: rgba(64, 158, 215, 0.14);
  --s-success:     #17c964;   /* HeroUI's own */
  --s-success-soft: rgba(23, 201, 100, 0.14);
  --s-warning:     #f5a524;
  --s-warning-soft: rgba(245, 165, 36, 0.14);
  --s-danger:      #ff383c;
  --s-danger-soft: rgba(255, 56, 60, 0.14);

  /* ---------- Geometry ---------- */
  --s-radius:      8px;       /* --radius: .5rem */
  --s-radius-sm:   4px;
  --s-radius-md:   6px;
  --s-radius-field: 12px;     /* --field-radius: radius * 1.5 */
  --s-radius-pill: 999px;

  --s-space:       4px;       /* --spacing: .25rem */
  --s-gap:         12px;      /* between cards */
  --s-pad:         16px;      /* inside one */

  /* ---------- Type ---------- */
  --s-text-xs:     12px;
  --s-text-sm:     14px;
  --s-text-base:   16px;
  --s-text-lg:     18px;
  --s-text-xl:     20px;
  --s-text-2xl:    24px;
  --s-num-track:   -0.6px;    /* HeroUI's tracking on figures */

  /* ---------- Depth ---------- */
  --s-shadow:      none;                                   /* dark needs none */
  --s-shadow-pop:  0 12px 32px rgba(0, 0, 0, 0.45);        /* menus, dialogs */

  --s-dur:         .15s;
  --s-ease:        cubic-bezier(.4, 0, .2, 1);
}

/* The light theme moves the same four steps to the other end. HeroUI's
   light: background #f5f5f5, surface #fff, secondary #efeff0,
   tertiary #eaeaeb, border #dedee0, muted #71717a — kept, with the
   navy cast on the neutrals and the accent darkened to hold 4.5:1. */
html[data-theme="light"] {
  --s-bg:          #f3f5f9;
  --s-1:           #ffffff;
  --s-2:           #eef1f6;
  --s-3:           #e6eaf1;
  --s-line:        #dce1ea;
  --s-line-strong: #c3ccda;

  --s-fg:          #0d1726;
  --s-fg-muted:    #5b6a81;
  --s-fg-subtle:   #55637a;
  --s-fg-disabled: #a3aec1;

  --s-accent:      #1b6fa8;
  --s-accent-hi:   #15577f;
  --s-accent-fg:   #ffffff;
  --s-accent-soft: rgba(27, 111, 168, 0.10);
  /* A status colour on the light sheet is usually its own ink on a ~16%
     tint of itself, which costs about half the contrast of the same ink
     on white: #157a4a measured 4.3:1 that way. Each is darkened until it
     clears 4.5 on its own tint, which is where these are actually used. */
  --s-success:     #10603a;
  --s-success-soft: rgba(16, 96, 58, 0.10);
  --s-warning:     #754900;
  --s-warning-soft: rgba(117, 73, 0, 0.10);
  --s-danger:      #990f1a;
  --s-danger-soft: rgba(153, 15, 26, 0.10);

  /* HeroUI's --surface-shadow, which is what carries a card on white */
  --s-shadow:      0 2px 4px rgba(13, 23, 38, .04), 0 1px 2px rgba(13, 23, 38, .06);
  --s-shadow-pop:  0 12px 32px rgba(13, 23, 38, 0.12);
}

:root {
  /* ---------- BRAND COLORS ---------- */
  --brand-navy:        #09162d;
  --brand-blue:        var(--s-accent);
  --brand-red:         #cd202d;

  /* Secondary palette (used across the workspace) */
  --navy-900:          #000000;
  --navy-850:          #011d40;
  --navy-800:          #053060;
  --navy-700:          #0a4080;

  --blue-500:          #3ebaf4;
  --blue-400:          #1fa2e7;
  --blue-300:          #7ea1ed;

  --red-500:           #ef1d0a;
  --red-400:           var(--s-danger);

  --amber-500:         var(--s-warning);
  --green-400:         var(--s-success);

  /* ---------- SEMANTIC SURFACES ----------
     The steps used to sit within ~3% of each other (#09162d page,
     #0d1c38 card, #112344 card-on-card), so a card read as a slightly
     different patch of the page rather than as its own object, and a
     table header barely separated from its rows. They are ~7% apart
     now, and the hairline went from 8% to 12% white. Same hue and the
     same brand blue — only the spacing between the layers changed. */
  /* These are now aliases of the design system (static/css/system.css),
     which carries the HeroUI geometry and ramp. Every page that speaks
     --de-* moved over without being touched. */
  --de-bg:             var(--s-bg);
  --de-bg-elev-1:      var(--s-1);
  --de-bg-elev-2:      var(--s-2);
  --de-bg-inset:       var(--s-bg);

  --de-fg:             var(--s-fg);
  --de-fg-muted:       var(--s-fg-muted);
  --de-fg-subtle:      var(--s-fg-subtle);
  --de-fg-disabled:    var(--s-fg-disabled);

  --de-border:         var(--s-line);
  --de-border-strong:  var(--s-line-strong);

  --de-success:        var(--s-success);
  --de-warning:        var(--s-warning);
  --de-danger:         var(--s-danger);

  /* ---------- TYPOGRAPHY ---------- */
  --de-font-sans:      'Inter', ui-sans-serif, system-ui, -apple-system,
                       'Helvetica Neue', Arial, sans-serif;

  /* Type scale */
  --de-fs-h1:          clamp(40px, 4.5vw, 64px);
  --de-fs-h2:          clamp(30px, 3vw, 44px);
  --de-fs-h3:          24px;
  --de-fs-h4:          18px;
  --de-fs-body:        16px;
  --de-fs-small:       14px;
  --de-fs-xs:          12px;
  --de-fs-micro:       12px;   /* the scale has no 11: its smallest step is 12 */

  /* Spacing & radii (sharp DiGit-edge geometry) */
  /* Controls at 10, cards at 14. The old 2/4/6/10 ladder produced
     four visibly different corners on one screen. */
  --de-radius-xs:      var(--s-radius-sm);
  --de-radius-sm:      var(--s-radius-md);
  --de-radius-md:      var(--s-radius);
  --de-radius-lg:      var(--s-radius);
  --de-radius-pill:    var(--s-radius-pill);

  /* Shadows */
  --de-shadow-sm:      0 1px 2px rgba(0,0,0,0.4);
  --de-shadow-md:      0 4px 12px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.4);
  --de-shadow-lg:      0 16px 32px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.3);
  --de-glow-blue:      0 0 0 1px rgba(64,158,215,0.4), 0 8px 32px rgba(64,158,215,0.25);

  /* Timing */
  --de-ease-out:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --de-ease-racing:    cubic-bezier(0.16, 1, 0.3, 1);
  --de-dur-fast:       120ms;
  --de-dur-base:       200ms;

  /* Gradients */
  --de-grad-hero:      radial-gradient(ellipse at 55% 55%, #17356a 0%, #09162d 62%, var(--s-bg) 100%);
}