/* Ravenflows design system: Plumage tokens.
   Black ink on cool paper, one feather sheen where something is alive (the mark, a running
   check). Status colours carry the meaning, so the brand stays ink.
   Every colour is a token; light values on :root, dark values under prefers-color-scheme
   (guarded by data-theme) and again under [data-theme="dark"], so the toggle wins both ways.
   Legacy names used by the classic dashboard (web/style.css) are aliases at the bottom. */

:root {
  /* ---- colour: neutrals ---- */
  --bg: #F5F6F8;            /* page canvas */
  --surface: #FFFFFF;       /* cards, panels, inputs */
  --raised: #FFFFFF;        /* popovers, menus, dialogs */
  --sunken: #ECEEF2;        /* wells, tracks, segmented controls */
  --sunken-2: #E2E5EA;      /* deeper wells, skeletons */
  --ink: #0E1116;           /* text and the brand */
  --ink-2: #4C5461;         /* secondary text (7:1 on surface) */
  --ink-3: #636B78;         /* tertiary text, meta (5:1 on surface) */
  --ink-4: #9AA1AC;         /* placeholder, disabled (decorative only) */
  --line: #E2E5EA;
  --line-strong: #CDD2DA;
  --scrim: rgba(14, 17, 22, .36);

  /* ---- colour: actions ---- */
  --primary: #0E1116;       /* the main action is ink */
  --primary-hover: #2A2F38;
  --primary-ink: #FFFFFF;
  --accent: #3346D3;        /* wing blue: links, selection, focus */
  --accent-hover: #2738B8;
  --accent-ink: #FFFFFF;
  --accent-soft: #E9ECFC;
  --accent-text: #2F41C4;
  --focus: #3346D3;
  --focus-ring: rgba(51, 70, 211, .22);

  /* ---- colour: status (semantic, never the brand) ---- */
  --works: #1C8F57;   --works-soft: #E3F4EA;   --works-text: #146B41;
  --broken: #D2353B;  --broken-soft: #FCEDEE;  --broken-line: #F4CDD0;  --broken-text: #B32A30;
  --differs: #C77700; --differs-soft: #FDF2DF; --differs-text: #8A5200;
  --kept: #3346D3;    --kept-soft: #E9ECFC;    --kept-text: #2F41C4;
  --uncovered: #A3AAB5;
  --unchecked: #7D8592;
  --untested: #CBD0D8;

  /* ---- colour: the sheen (the mark, a live check) and the compare layers ---- */
  --sheen-1: #4F66FF; --sheen-2: #17B3C6; --sheen-3: #8E5CF6;
  --sheen: linear-gradient(115deg, var(--sheen-1), var(--sheen-2) 50%, var(--sheen-3));
  --layer-design: #0089C7;  /* cyan: the Figma design in overlays and outlines */
  --layer-app: #C2186B;     /* magenta: the real app */

  /* ---- type ---- */
  --font-sans: "Mona Sans", "IBM Plex Sans Arabic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Mona Sans", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --stretch-display: 112%;  /* Mona Sans width axis: wide for headings */
  --stretch-text: 100%;
  --t-2xs: 11px; --t-xs: 12px; --t-sm: 13px; --t-md: 15px; --t-lg: 18px; --t-xl: 24px; --t-2xl: 34px; --t-3xl: 48px;
  --lh-tight: 1.15; --lh-snug: 1.3; --lh: 1.5;
  --w-regular: 420; --w-medium: 520; --w-semibold: 620; --w-display: 680;
  --track-display: -0.032em; --track-heading: -0.015em; --track-caps: .04em;

  /* ---- space (4 px grid) ---- */
  --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* ---- radius (by size) ---- */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px;

  /* ---- elevation ---- */
  --e-0: none;
  --e-1: 0 1px 2px rgba(14, 17, 22, .05);
  --e-2: 0 1px 2px rgba(14, 17, 22, .06), 0 10px 28px -12px rgba(14, 17, 22, .18);
  --e-3: 0 2px 6px rgba(14, 17, 22, .06), 0 28px 64px -18px rgba(14, 17, 22, .32);
  --e-frame: 0 0 0 1px rgba(14, 17, 22, .08), 0 6px 18px -8px rgba(14, 17, 22, .22);

  /* ---- motion ---- */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-sheen: 2400ms;
  --ease: cubic-bezier(.2, .7, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* ---- layers ---- */
  --z-top: 20; --z-rail: 25; --z-drawer: 30; --z-dialog: 40; --z-toast: 50;

  /* ---- legacy aliases (classic dashboard, agent.css, compose.css) ---- */
  --canvas: var(--bg);
  --font: var(--font-sans);
  --mono: var(--font-mono);
  --nottested: var(--untested);
  --shadow: var(--e-1);
  --shadow-hover: var(--e-2);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B0D11; --surface: #14171D; --raised: #1A1E25; --sunken: #1B1F27; --sunken-2: #242933;
    --ink: #EEF1F5; --ink-2: #A6AEBA; --ink-3: #8C95A2; --ink-4: #5E6672;
    --line: #242932; --line-strong: #353B47; --scrim: rgba(0, 0, 0, .55);
    --primary: #EEF1F5; --primary-hover: #FFFFFF; --primary-ink: #0B0D11;
    --accent: #8C9BFF; --accent-hover: #A6B2FF; --accent-ink: #0B0D11; --accent-soft: #1E2342; --accent-text: #A3AFFF;
    --focus: #8C9BFF; --focus-ring: rgba(140, 155, 255, .28);
    --works: #45C988; --works-soft: #12291D; --works-text: #6FDBA4;
    --broken: #FF6B6B; --broken-soft: #2C1517; --broken-line: #4A2226; --broken-text: #FF8A8A;
    --differs: #F2A93B; --differs-soft: #2E2210; --differs-text: #F7C26E;
    --kept: #8C9BFF; --kept-soft: #1E2342; --kept-text: #A3AFFF;
    --uncovered: #5A626E; --unchecked: #8C95A2; --untested: #3A404B;
    --sheen-1: #7186FF; --sheen-2: #3FD3E0; --sheen-3: #B28CFF;
    --layer-design: #3CC3F2; --layer-app: #FF5C9C;
    --e-1: none;
    --e-2: 0 0 0 1px rgba(255, 255, 255, .03), 0 14px 32px -14px rgba(0, 0, 0, .7);
    --e-3: 0 0 0 1px rgba(255, 255, 255, .05), 0 30px 70px -20px rgba(0, 0, 0, .8);
    --e-frame: 0 0 0 1px rgba(255, 255, 255, .09);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0B0D11; --surface: #14171D; --raised: #1A1E25; --sunken: #1B1F27; --sunken-2: #242933;
  --ink: #EEF1F5; --ink-2: #A6AEBA; --ink-3: #8C95A2; --ink-4: #5E6672;
  --line: #242932; --line-strong: #353B47; --scrim: rgba(0, 0, 0, .55);
  --primary: #EEF1F5; --primary-hover: #FFFFFF; --primary-ink: #0B0D11;
  --accent: #8C9BFF; --accent-hover: #A6B2FF; --accent-ink: #0B0D11; --accent-soft: #1E2342; --accent-text: #A3AFFF;
  --focus: #8C9BFF; --focus-ring: rgba(140, 155, 255, .28);
  --works: #45C988; --works-soft: #12291D; --works-text: #6FDBA4;
  --broken: #FF6B6B; --broken-soft: #2C1517; --broken-line: #4A2226; --broken-text: #FF8A8A;
  --differs: #F2A93B; --differs-soft: #2E2210; --differs-text: #F7C26E;
  --kept: #8C9BFF; --kept-soft: #1E2342; --kept-text: #A3AFFF;
  --uncovered: #5A626E; --unchecked: #8C95A2; --untested: #3A404B;
  --sheen-1: #7186FF; --sheen-2: #3FD3E0; --sheen-3: #B28CFF;
  --layer-design: #3CC3F2; --layer-app: #FF5C9C;
  --e-1: none;
  --e-2: 0 0 0 1px rgba(255, 255, 255, .03), 0 14px 32px -14px rgba(0, 0, 0, .7);
  --e-3: 0 0 0 1px rgba(255, 255, 255, .05), 0 30px 70px -20px rgba(0, 0, 0, .8);
  --e-frame: 0 0 0 1px rgba(255, 255, 255, .09);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-sheen: 0ms; }
}