/* fallow-ignore-file unused-file
   Loaded by src/allianceos/web/templates/base.html as /static/{name}.
   Fallow resolves imports, not Jinja-rendered href/src attributes, so it
   reads every one of these as unreachable. They are served by the
   StaticFiles mount in web/app.py and driven by tests/test_web.py. */
/* Alliance Design System — tokens transcribed verbatim from
   C:\AI\Alliance Electric\DESIGN.md. This file is the single source of truth
   for colour, type, spacing, elevation and motion in the Operating System.

   Two rules from the DESIGN.md "why" that govern everything here:
     1. Light is ADDITIVE, never a gate on legibility. Nothing starts dim.
     2. Verde Fluo is a SIGNATURE and is rationed. FILL only on light
        surfaces; it may be text only on Midnight (#030020 / #02096D). */

:root {
  /* Daylight Trade — the default chrome */
  --surface:      #FFFFFF;
  --panel:        #F1F1F1;
  --ink:          #030020;   /* 20.5:1 */
  --ink-soft:     #3D4258;   /*  9.9:1 */
  --deep:         #02096D;   /* 16.6:1 */
  --primary:      #1164F9;   /* fills + large text ONLY (4.98:1) */
  --primary-ink:  #FFFFFF;
  --accent:       #2AF89E;   /* SIGNATURE — fill only on light */
  --accent-ink:   #030020;   /* 14.7:1 on accent */
  --muted:        #999999;   /* borders/disabled/UI only — NEVER text */
  --border:       #E2E4EE;

  /* Midnight Electric — fixed dark bands. Theme-INVARIANT: these never flip. */
  --surface-hero:  #030020;
  --hero-elevated: #0C0838;
  --hero-border:   #262247;
  --hero-ink:      #F1F1F1;
  --hero-ink-soft: #B9BCC9;
  --verde:         #2AF89E;

  /* Semantic signals. Not in DESIGN.md; derived to sit with the palette and
     meet AA on --panel. Never colour-only — every use pairs with an icon or
     text label. */
  --ok:    #0A7C42;
  --warn:  #8A5A00;
  /* The matched part of a search result. */
  --mark:  #FDE68A;
  --alert: #A31220;

  --font-display: Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 36px;
  --touch-min: 44px;

  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px;

  /* Navy-cast shadows, never gray-black */
  --elevation-card: 0 1px 2px rgb(3 0 32 / .06), 0 8px 24px rgb(3 0 32 / .07);
  --elevation-pop:  0 2px 6px rgb(3 0 32 / .10), 0 16px 48px rgb(3 0 32 / .16);

  /* Carbon motion scale — tokens only, never raw ms in components */
  --motion-instant:  70ms;
  --motion-fast:    110ms;
  --motion-quick:   150ms;
  --motion-moderate:240ms;
  --motion-slow:    400ms;
  --motion-slower:  700ms;
  --ease-standard:   cubic-bezier(.2, 0, .38, .9);
  --ease-entrance:   cubic-bezier(0, 0, .38, .9);
  --ease-exit:       cubic-bezier(.2, 0, 1, .9);
  --ease-expressive: cubic-bezier(.4, .14, .3, 1);
  --motion-stagger-step: 40ms;
  --motion-duration-ambient: 1600ms;

  --sidebar-w: 248px;
  --topbar-h: 68px;   /* DESIGN.md: header height = 68px everywhere */
}

/* Midnight Electric — the "lights off" wink. Verde leads in the dark.

   fallow-ignore-next-line duplication
   The palette below is deliberately written twice. One copy is gated on the
   media query, for everyone who never touched the theme control; the other on
   the attribute, for everyone who did. Plain CSS cannot share one declaration
   block across a media-gated and an attribute-gated selector, and collapsing
   them would mean one of the two groups loses the dark palette entirely. */
:root:not([data-theme="light"]) {
  @media (prefers-color-scheme: dark) {
    --surface:     #030020;
    --panel:       #0C0838;
    --ink:         #F1F1F1;
    --ink-soft:    #B9BCC9;
    --deep:        #F1F1F1;
    --primary:     #2AF89E;
    --primary-ink: #030020;
    --accent:      #1164F9;
    --accent-ink:  #FFFFFF;
    --border:      #262247;
    --ok:    #3FD98A;
    --warn:  #E2B24C;
    --mark:  #6B4E00;
    --alert: #FF7A85;
  }
}

:root[data-theme="dark"] {
  --surface:     #030020;
  --panel:       #0C0838;
  --ink:         #F1F1F1;
  --ink-soft:    #B9BCC9;
  --deep:        #F1F1F1;
  --primary:     #2AF89E;
  --primary-ink: #030020;
  --accent:      #1164F9;
  --accent-ink:  #FFFFFF;
  --border:      #262247;
  --ok:    #3FD98A;
  --warn:  #E2B24C;
  --mark:  #6B4E00;
  --alert: #FF7A85;
}

/* Reduced motion: a global reset AND explicit animation:none, because a
   duration reset does not stop a scroll-driven timeline (DESIGN.md). Every
   surface rests in its FINAL state — light is never gated on motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .halo, .sheen { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---------------------------------------------------------------------------
   Rules carried over from the Ananda apps, where Gordon has already settled
   them. Adopted here so the two systems feel like one hand made them.

   D35  Form spacing is ONE step everywhere. Use --gap-form on the container;
        never stack a margin and a gap on the same boundary.
   D39  Connected controls align as a unit: side-by-side means flush edges and
        equal height; stacked means a shared edge.
   D42  Text is NEVER hard-clipped. Ellipsis plus a title attribute, "+N" for
        overflowing sets, and min-width:0 on every flex/grid child.
   --------------------------------------------------------------------------- */
:root {
  --gap-form: 13px;
  --control-h: 40px;
}