/* Co-work design tokens. ONE source for both sides of Co-work: the expert portal
 * (index.html) and the owner panel (admin.html). Loaded before every other stylesheet.
 *
 * THE DESIGN LANGUAGE (owner, 2026-10-18): calm, airy, professional. A quiet blue-grey
 * workspace with soft pastel accents -- a well-made notebook, not a busy admin panel.
 * Lots of white space, thin lines, light type, almost no shadow. Light mode only.
 * Reference: docs/DESIGN_SYSTEM.md.
 *
 * Three tiers, and only the last two are for components:
 *   1. SPEC PALETTE (--background, --surface, --tone-blue-bg ...) the named colours of the
 *      design language. Components may use these names directly, never a hex.
 *   2. SEMANTIC (--fg-muted, --bg-sunken, --success-fg ...) jobs mapped onto the palette.
 *   3. LEGACY (--primary, --muted, --card ...) the names older rules were written
 *      against, pointed at semantic tokens so they follow the language too.
 *
 * CONTRAST IS MEASURED (WCAG 2.2 AA). Every text pair passes 4.5:1 on every surface it
 * can sit on; tests/test_design_tokens.py recomputes them. Three rules fall out of the
 * measurements and are not obvious from the palette:
 *   - destructive text never sits on the pink tint (3.8:1): pink chips use the pink ink;
 *   - subtle text never sits on a tone background (4.0:1 on blue);
 *   - bars and dots use the INKS, never the soft backgrounds (1.3:1).
 * ONE DELIBERATE EXCEPTION (owner ruling 2026-10-18): input and card edges both use the
 * soft --border (1.25:1). A field is identified by its label, its placeholder and its
 * focus ring rather than a dark edge; the owner chose that over a harsh border.
 */
:root {
  /* ── 1. SPEC PALETTE ────────────────────────────────────────────────── */
  /* Owner, 2026-10-18: "too blueish" -- #f1f4f7 carried twice this blue cast. */
  --background:        #f4f5f7;   /* app background */
  --surface:           #f9fbfc;   /* cards, inputs, popovers */
  --surface-muted:     #e8edf3;   /* active nav, hover, skeletons, neutral chips */
  --border:            #dce3ea;   /* every border; list dividers use border/70 */
  --foreground:        #1f2833;   /* main text; the primary button fill */
  --foreground-muted:  #4f5b67;   /* secondary text, descriptions, meta (5.9:1 on muted) */
  --foreground-subtle: #5f6a76;   /* labels, placeholders, icons at rest (4.7:1 on muted) */
  --destructive:       #a4534d;   /* errors only (4.55:1 on muted, 5.2:1 on surface) */
  /* Focus. The spec's #a9b5c2 at 50% is 1.4:1; this keeps its blue-grey and passes 3:1
     on every surface, shown only for keyboard focus. Change here to revert. */
  --ring:              #6f8aa8;

  /* Pastel pairs: a soft background and an ink for text on it. Use the pair together. */
  --tone-blue-bg:     #cddcee;  --tone-blue-ink:     #3a5f8c;   /* new / info, avatar, unread */
  --tone-green-bg:    #cfe0d8;  --tone-green-ink:    #335647;   /* accepted, done, scheduled */
  --tone-lavender-bg: #dcdaf0;  --tone-lavender-ink: #5a5688;   /* the twin / AI */
  --tone-pink-bg:     #ecd5d8;  --tone-pink-ink:     #74434a;   /* soft warnings, sparingly */
  --tone-yellow-bg:   #efe6c4;  --tone-yellow-ink:   #62511c;   /* pending */
  --tone-peach-bg:    #f1dccb;  --tone-peach-ink:    #774c2a;   /* needs the expert's attention */

  /* The freshness check's three phases while it runs (owner, 2026-10-19): knowledge cards
     blue, strategies orange, outcomes red, on a soft track; a pending phase is the track
     alone. Data marks: each fill is at least 3:1 on the surface (tests/test_design_tokens.py). */
  --phase-blue:   #3a6fb0;
  --phase-orange: #b8621b;
  --phase-red:    #b2433d;
  --phase-track:  #e3e7ec;

  --shadow-soft: 0 1px 2px rgb(31 40 51 / .03), 0 8px 30px rgb(31 40 51 / .05);

  /* THE SIDEBAR KEEPS ITS FIRST DESIGN (owner, 2026-10-18): a floating dark container
     in the brand ink, the current page in blue. Measured on the ink: items 9.3:1,
     labels 6.2:1; white on the blue 5.3:1. */
  --sidebar-bg:     #120008;
  --sidebar-active: #0b6fb8;
  --sidebar-dot:    #5fbdfd;

  /* ── 2. SEMANTIC: colour ────────────────────────────────────────────── */
  --bg-page:     var(--background);
  --bg-surface:  var(--surface);         /* cards: border border-border bg-surface */
  --bg-sunken:   var(--surface-muted);   /* wells, tracks, skeletons */
  --bg-raised:   var(--surface);         /* inputs, popovers, menus */
  --bg-inverse:  var(--sidebar-bg);
  --bg-overlay:  rgb(31 40 51 / .32);
  --veil-light:  rgb(255 255 255 / .2);  /* "Coming soon" over a page that stays visible */
  --veil-blur:   4px;
  --bg-hover:    rgb(232 237 243 / .6);  /* surface-muted/60 */
  --bg-active:   var(--surface-muted);
  --bg-selected: var(--surface-muted);

  --fg-default:   var(--foreground);
  --fg-secondary: var(--foreground-muted);
  --fg-muted:     var(--foreground-muted);   /* meta lines and descriptions */
  --fg-subtle:    var(--foreground-subtle);  /* eyebrows, labels, placeholders, icons */
  --fg-disabled:  #8d97a2;                   /* exempt from contrast, and looks it */
  --fg-on-accent: var(--surface);            /* text on the dark primary fill */
  --fg-accent:    var(--tone-blue-ink);      /* links: 5.6:1 on muted, more elsewhere */

  --border-subtle:  rgb(220 227 234 / .7);   /* border/70: list dividers */
  --border-default: var(--border);
  --border-strong:  #c9d2dc;                 /* dashed empty-state frames, rare */
  --border-control: var(--border);           /* soft by owner ruling: see the header */
  --border-accent:  var(--ring);

  /* The primary action is DARK, not blue: bg-foreground text-surface. Blue is a tone. */
  --accent-emphasis: var(--foreground);
  --accent-hover:    #354050;                /* 10.1:1 under surface text */
  --accent-mark:     var(--tone-blue-ink);
  --accent-subtle:   var(--tone-blue-bg);
  --accent-muted:    var(--tone-blue-bg);

  /* Feedback, by the language's meanings. -fg is the ink (text on its -bg or on any
     surface); -solid is a bar, dot or edge; danger's inline text is --destructive. */
  --success-fg: var(--tone-green-ink);   --success-bg: var(--tone-green-bg);
  --success-border: var(--tone-green-bg); --success-solid: var(--tone-green-ink);
  --warning-fg: var(--tone-yellow-ink);  --warning-bg: var(--tone-yellow-bg);
  --warning-border: var(--tone-yellow-bg); --warning-solid: var(--tone-yellow-ink);
  --danger-fg:  var(--destructive);      --danger-bg:  var(--tone-pink-bg);
  --danger-border: var(--tone-pink-bg);  --danger-solid: var(--destructive);
  --danger-ink: var(--tone-pink-ink);    /* text ON the pink tint (destructive is 3.8:1 there) */
  --info-fg:    var(--tone-blue-ink);    --info-bg:    var(--tone-blue-bg);
  --info-border: var(--tone-blue-bg);    --info-solid: var(--tone-blue-ink);
  --attention-fg: var(--tone-peach-ink); --attention-bg: var(--tone-peach-bg);
  --ai-fg:      var(--tone-lavender-ink); --ai-bg:     var(--tone-lavender-bg);
  --neutral-fg: var(--foreground-muted); --neutral-bg: var(--surface-muted);

  /* Data: inks for marks (all 5:1+ on every surface), muted surface for tracks. */
  --viz-1: var(--tone-blue-ink);  --viz-2: var(--tone-lavender-ink); --viz-3: var(--tone-green-ink);
  --viz-4: var(--tone-peach-ink); --viz-5: var(--tone-pink-ink);     --viz-track: var(--surface-muted);
  --node-case-mark: var(--tone-blue-ink);          --node-case-fg: var(--tone-blue-ink);
  --node-case-bg: var(--tone-blue-bg);
  --node-knowledge-mark: var(--tone-lavender-ink); --node-knowledge-fg: var(--tone-lavender-ink);
  --node-knowledge-bg: var(--tone-lavender-bg);
  --node-strategy-mark: var(--tone-yellow-ink);    --node-strategy-fg: var(--tone-yellow-ink);
  --node-strategy-bg: var(--tone-yellow-bg);
  --node-outcome-mark: var(--tone-green-ink);      --node-outcome-fg: var(--tone-green-ink);
  --node-outcome-bg: var(--tone-green-bg);
  --node-profile-mark: var(--tone-peach-ink);      --node-profile-fg: var(--tone-peach-ink);
  --node-profile-bg: var(--tone-peach-bg);

  /* Inverse: the dark sidebar (and other dark islands; the Canvas keeps its own palette). */
  --inverse-fg:        #ffffff;
  --inverse-fg-muted:  rgba(255, 255, 255, .68);
  --inverse-fg-subtle: rgba(255, 255, 255, .55);
  --inverse-border:    rgba(255, 255, 255, .10);
  --inverse-hover:     rgba(255, 255, 255, .07);
  --inverse-focus:     #b9c8d8;

  --focus-color: var(--ring);
  --ring-soft: rgb(111 138 168 / .35);          /* the field focus halo */
  --surface-translucent: rgb(249 251 252 / .6); /* bg-surface/60: empty-state cards */
  --focus-ring:  0 0 0 3px rgb(111 138 168 / .55), 0 0 0 1px var(--ring);

  /* ── 2. SEMANTIC: type ──────────────────────────────────────────────── */
  --font-sans:  'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: var(--font-sans);   /* retired: big type is light Geist, not serif */
  --font-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-2xs: 11px;   /* eyebrows: medium, uppercase, .08em, subtle */
  --text-xs:  12px;   /* meta lines, chips */
  --text-sm:  13px;   /* nav items, controls */
  --text-md:  14px;   /* body */
  --text-body-lg: 15px; /* card titles, chat messages */
  --text-lg:  18px;   /* section h2 */
  --text-xl:  20px;
  --text-2xl: 24px;
  --text-3xl: 30px;   /* page h1, big numbers (light) */
  --text-4xl: 42px;   /* hero h1 on desktop */
  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-chat: 1.7;
  --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 500;
  --weight-bold: 500;  /* the language has no bold: emphasis is medium at most */
  --tracking-tight: -.025em;
  --tracking-overline: .08em;

  /* ── 2. SEMANTIC: space, shape, depth, motion ───────────────────────── */
  /* Tailwind's numbering: --space-N is N x 4px, so mt-9 is --space-9. */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 36px; --space-10: 40px;
  --space-11: 44px; --space-12: 48px; --space-14: 56px;

  /* Radius base 0.75rem. lg = base (buttons, nav), xl = search, 2xl = cards and panels. */
  --radius-base: 12px;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;     /* rounded-lg: buttons, nav items, inputs */
  --radius:    20px;     /* rounded-2xl: cards and panels (legacy name kept) */
  --radius-xl: 16px;     /* rounded-xl: the search field */
  --radius-lg: 20px;
  --radius-2xl: 20px;
  --radius-pill: 999px;

  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: var(--shadow-soft);   /* popovers and menus */
  --shadow-lg: var(--shadow-soft), 0 24px 60px rgb(31 40 51 / .10);  /* dialogs, drawer */

  --duration-fast: 120ms;
  --duration-base: 180ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);

  --control-h-sm: 32px;   /* size sm, in cards */
  --control-h-md: 36px;
  --control-h-lg: 40px;   /* the header search */

  --z-sticky: 50; --z-inbox: 60; --z-sidebar: 100; --z-popover: 200; --z-modal: 300;

  --sidebar-w: 224px;
  --drawer-w: 264px;
  --sidebar-gap: 12px;   /* the sidebar floats this far from the edges */
  --page-pad-x: 32px;     /* md:px-8 */
  --page-pad-y: 8px;      /* pt-2 */
  --page-max: 1024px;     /* max-w-5xl: overview pages */
  --page-max-narrow: 768px; /* max-w-3xl: lists, forms, threads */
  --topbar-h: 64px;

  /* ── 3. LEGACY NAMES ────────────────────────────────────────────────── */
  --sidebar:        var(--sidebar-bg);
  --primary:        var(--accent-emphasis);
  --primary-dark:   var(--accent-hover);
  --primary-light:  var(--tone-blue-ink);
  --primary-bg:     var(--accent-subtle);
  --primary-border: var(--accent-muted);
  --bg:             var(--bg-page);
  --card:           var(--bg-surface);
  --card-warm:      var(--bg-sunken);
  --text:           var(--fg-default);
  --muted:          var(--fg-muted);
  --danger:         var(--danger-fg);
  --success:        var(--success-fg);
  --warning:        var(--warning-fg);
  /* --border is a spec name (above) and the legacy one at once. */
  --surface-2:      var(--bg-sunken);
  --accent:         var(--accent-emphasis);
  --bg-elev:        var(--bg-raised);
}

/* The phase colours for a dark surface. Co-work is light only today (owner, 2026-10-18); this
   block is here so a dark island that sets data-theme="dark" gets readable bars. */
[data-theme="dark"] {
  --phase-blue:   #7fa9de;
  --phase-orange: #e89a55;
  --phase-red:    #e27a72;
  --phase-track:  rgba(255, 255, 255, .14);
}