/* ==========================================================================
   Legally Unbullied — DESIGN TOKENS (the only place a colour is defined)

   Palette A: Graphite & Gold. Two hue families only:
     neutral ink   (canvas, recessed, surface, elevated, selected, text, muted)
     one gold      (accent, accent-hover, on-accent)

   Rules enforced by this file:
   1. No stylesheet and no script may hold a hex, an rgb() or a named colour.
      Anything visual references a token from here.
   2. There is no third hue. "Danger" and "success" are neutral by design:
      a destructive action is carried by wording, weight and its icon, not by
      a colour of its own. This is why --color-danger is a light neutral.
   3. Elevation is a fill step plus a shadow, never a lighter slab alone.
   4. Focus is the accent, in the same family as the thing being looked at.
   5. Nothing here is a one-off: every value is a step of one scale.

   Contrast, measured (WCAG 2.1, sRGB):
     text   on canvas 14.72:1   text on surface 13.34:1
     muted  on canvas  7.01:1   muted on surface  6.35:1   muted on recessed 7.57:1
     accent on canvas  8.94:1   accent on surface 8.10:1
     on-accent on accent 9.97:1 on-accent on accent-hover 11.66:1
     danger(neutral) on surface 9.11:1
   ========================================================================== */

:root {
  /* ---- neutral ink: five fills, two inks -------------------------------- */
  --color-canvas:        #1e1f23;  /* app background */
  --color-recessed:      #17181a;  /* sidebar, one step below the canvas */
  --color-surface:       #26272b;  /* cards, composer, rows that hold text */
  --color-elevated:      #2b2c31;  /* menus and popovers, above a card */
  --color-selected:      #2f3036;  /* current row / current item */

  --color-text:          #f2f2f3;
  --color-text-muted:    #a8a9ad;

  /* ---- one gold --------------------------------------------------------- */
  --color-accent:        #f0b60a;
  --color-accent-hover:  #ffc61a;
  --color-on-accent:     #1a1400;

  /* ---- semantics that are NOT new colours ------------------------------- */
  /* Destructive reads as "this is different", never as a red slab. */
  --color-danger:        #c9cace;
  --color-danger-hover:  #ffffff;
  /* Success is the accent: gold already means "this is the thing". */
  --color-success:       var(--color-accent);

  /* Shadows are the elevation, not a fill. */
  --shadow-menu:  0 12px 28px -10px rgba(0, 0, 0, 0.78), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-sheet: 0 -18px 40px -18px rgba(0, 0, 0, 0.7);
  --shadow-topbar: 0 1px 0 rgba(255, 255, 255, 0.04);

  /* Scrims are ink at low alpha, never a new hue. */
  --color-scrim:         rgba(12, 13, 15, 0.62);
  --color-scrim-soft:    rgba(12, 13, 15, 0.35);
  --color-topbar:        rgba(30, 31, 35, 0.86);

  /* ---- compatibility aliases -------------------------------------------
     Older rules say --color-bg, --color-bg-raised, --color-surface-alt,
     --color-chip, --color-border*. They all resolve into the five fills
     above so no rule can introduce a fill that is not in the scale. */
  --color-bg:            var(--color-canvas);
  --color-bg-raised:     var(--color-recessed);
  --color-surface-alt:   var(--color-surface);
  --color-chip:          var(--color-elevated);
  --color-border:        var(--color-elevated);
  --color-border-soft:   var(--color-elevated);
  --color-accent-text:   var(--color-on-accent);
  --color-accent-soft:   rgba(240, 182, 10, 0.12);
  --color-accent-border: var(--color-accent);
  --color-text-faint:    var(--color-text-muted);
  --color-focus:         var(--color-accent);
  --color-translucent-topbar: var(--color-topbar);

  /* ---- spacing scale --------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* ---- radius scale ----------------------------------------------------
     Four steps, and a shape must earn one: a surface that holds content gets
     a radius, a bare icon or a text action does not get a pill. */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 999px;

  /* ---- typography ------------------------------------------------------ */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 14.5px;
  --fs-md:   16px;
  --fs-lg:   19px;
  --fs-xl:   24px;

  /* ---- layout ---------------------------------------------------------- */
  --sidebar-width: 344px;
  --topbar-height: 56px;
  --composer-max-width: 780px;
  --border-width: 1px;

  /* ---- motion ---------------------------------------------------------- */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring:  cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-inout:   cubic-bezier(0.42, 0, 0.58, 1);
  --ease-press:   cubic-bezier(0.33, 0, 0.67, 0);
  --dur-press: 90ms;
  --dur-fast:  120ms;
  --dur-base:  180ms;
  --dur-med:   240ms;
  --dur-slow:  320ms;
}

@media (prefers-reduced-transparency: reduce) {
  :root { --color-topbar: var(--color-canvas); --color-translucent-topbar: var(--color-canvas); }
}

/* Brand exception: the Google mark on the sign-in button is Google's, not
   ours. Those four hexes live in auth.css next to the mark and nowhere else. */