/* Roseway HQ's design language (18 Oct 2026, the v2 rework). Yash: "an extremely effective way of building the app,
   but also extremely pleasurable to use". A studio for deciding and building.

   Character: warm paper and deep ink, one confident ultramarine for action, an editorial serif for the moments that
   matter (the queue's headline, page titles), a clean grotesque for everything you read and press, a mono for keys.
     Type:   Instrument Serif (display), Instrument Sans (text and UI), JetBrains Mono (keys, code, ids)
     Colour: paper / ink neutrals; ultramarine accent; good (green), warn (amber), risk (red) in soft, line and ink steps
     Shape:  12 px controls, 18 px cards, pills for chips and buttons
     Motion: short and calm (140 / 240 / 420 ms, one ease-out curve); everything still under prefers-reduced-motion

   The --rw-* names are kept so every page's stylesheet (app.css) picks the new language up at once; --hq-* tokens are
   the ones only this language has (display type, motion, the focus ring, elevations of the queue). Light by default;
   dark under html[data-theme="dark"]: the theme menu in the top bar (Light / Dark / Match system, theme.js), kept per
   person on the server. */

:root {
  color-scheme: light;
  /* ── accent: ultramarine ─────────────────────────────────────────────────── */
  --rw-brand-50:  #f1f1fe;
  --rw-brand-100: #e5e5fd;
  --rw-brand-200: #c9c9fa;
  --rw-brand-300: #a3a2f5;
  --rw-brand-400: #6f6cf0;
  --rw-brand-500: #4f4be6;
  --rw-brand-600: #3d39d4;   /* filled buttons: white text 7.0:1 */
  --rw-brand-700: #322eb3;   /* links and active text on paper */
  --rw-brand-800: #26238a;
  --rw-brand-900: #1b1963;
  --rw-brand: var(--rw-brand-500);

  /* ── neutrals: paper and ink ─────────────────────────────────────────────── */
  --rw-bg:          #f6f5f1;   /* the page: warm paper */
  --rw-rail:        #ecebe5;   /* tracks, neutral chips */
  --rw-surface:     #fffefb;   /* cards, the sidebar, dialogs */
  --rw-surface-2:   #ffffff;   /* inputs, cards in cards */
  --rw-hover:       #f2f1ec;
  --rw-line:        #e4e2da;
  --rw-line-soft:   #eeede7;
  --rw-line-strong: #cfccc1;
  --rw-text:        #16171b;   /* ink: 17:1 on paper */
  --rw-text-2:      #3b3d44;
  --rw-muted:       #5f626b;   /* 6.1:1 */
  --rw-faint:       #737680;   /* 4.6:1 */

  /* ── roles ──────────────────────────────────────────────────────────────── */
  --rw-accent:       var(--rw-brand-600);
  --rw-accent-hover: var(--rw-brand-700);
  --rw-accent-ink:   var(--rw-brand-700);
  --rw-accent-soft:  var(--rw-brand-100);
  --rw-accent-faint: var(--rw-brand-50);
  --rw-accent-line:  var(--rw-brand-200);
  --rw-on-accent:    #ffffff;
  --rw-focus:        var(--rw-brand-400);

  /* ── status ─────────────────────────────────────────────────────────────── */
  --rw-good:      #1f8a5c;  --rw-good-ink: #136b45;  --rw-good-soft: #e3f3ea;  --rw-good-line: #b9e0c9;
  --rw-warn:      #c98a12;  --rw-warn-ink: #8a5800;  --rw-warn-soft: #fbf0d9;  --rw-warn-line: #ecd29c;
  --rw-bad:       #cf3e33;  --rw-bad-ink:  #a82a20;  --rw-bad-soft:  #fbe7e4;  --rw-bad-line:  #f0c0b9;
  --rw-purple-ink: #6b3fa0; --rw-purple-soft: #f0e8f9;

  /* ── type ───────────────────────────────────────────────────────────────── */
  --rw-font-sans:    'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rw-font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --rw-font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --rw-text-xs: 12px;  --rw-text-sm: 13px;  --rw-text-base: 14px;  --rw-text-lg: 16px;
  --rw-title-size:   30px;
  --rw-title-weight: 400;
  --rw-title-tracking: -.01em;
  --rw-label-size:   11px;
  --rw-label-tracking: .08em;

  /* ── shape ──────────────────────────────────────────────────────────────── */
  --rw-radius-xs:   6px;
  --rw-radius-sm:   10px;
  --rw-radius-md:   12px;
  --rw-radius-lg:   18px;
  --rw-radius-pill: 999px;

  /* ── spacing (4 px steps) ───────────────────────────────────────────────── */
  --rw-space-1: 4px;  --rw-space-2: 8px;  --rw-space-3: 12px; --rw-space-4: 16px;
  --rw-space-5: 20px; --rw-space-6: 24px; --rw-space-7: 28px; --rw-space-8: 32px;

  /* ── elevation ──────────────────────────────────────────────────────────── */
  --rw-shadow-sm: 0 1px 0 rgba(22, 23, 27, .04), 0 1px 2px rgba(22, 23, 27, .05);
  --rw-shadow:    0 1px 0 rgba(22, 23, 27, .04), 0 6px 18px -6px rgba(22, 23, 27, .12);
  --rw-shadow-lg: 0 24px 60px -18px rgba(22, 23, 27, .28), 0 2px 6px rgba(22, 23, 27, .06);
  --rw-scrim:     rgba(16, 17, 22, .45);

  /* ── HQ only ───────────────────────────────────────────────────────────── */
  --hq-ease: cubic-bezier(.2, .8, .2, 1);
  --hq-fast: 140ms;
  --hq-mid: 240ms;
  --hq-slow: 420ms;
  --hq-ring: 0 0 0 3px color-mix(in srgb, var(--rw-accent) 28%, transparent);
  --hq-glow: 0 0 0 1px var(--rw-accent), 0 10px 30px -10px color-mix(in srgb, var(--rw-accent) 55%, transparent);
  --hq-ink-soft: color-mix(in srgb, var(--rw-text) 6%, transparent);

  --rw-sidebar-width: 248px;
}

/* Dark: deep ink, the same ultramarine lifted so it reads on it. */
html[data-theme="dark"] {
  color-scheme: dark;     /* the browser's own controls (scroll bars, inputs, pickers) follow */
  --rw-brand-50:  rgba(124, 122, 255, .10);
  --rw-brand-100: rgba(124, 122, 255, .18);
  --rw-brand-200: rgba(124, 122, 255, .36);
  --rw-brand-400: #8f8dff;
  --rw-brand-600: #8f8dff;
  --rw-brand-700: #b6b5ff;

  --rw-bg:          #0e0f13;
  --rw-rail:        #20222a;
  --rw-surface:     #15161c;
  --rw-surface-2:   #1b1d24;
  --rw-hover:       #1c1e26;
  --rw-line:        rgba(236, 237, 241, .10);
  --rw-line-soft:   rgba(236, 237, 241, .06);
  --rw-line-strong: rgba(236, 237, 241, .22);
  --rw-text:        #ecedf1;
  --rw-text-2:      #c8cad2;
  --rw-muted:       #a1a4ae;
  --rw-faint:       #868994;

  --rw-accent:       #8f8dff;
  --rw-accent-hover: #a7a5ff;
  --rw-accent-ink:   #b6b5ff;
  --rw-on-accent:    #0d0c2a;

  --rw-good: #3fb985;  --rw-good-ink: #7fd6ac;  --rw-good-soft: rgba(63, 185, 133, .16);  --rw-good-line: rgba(63, 185, 133, .40);
  --rw-warn: #e7a93a;  --rw-warn-ink: #f2c66f;  --rw-warn-soft: rgba(231, 169, 58, .15);  --rw-warn-line: rgba(231, 169, 58, .38);
  --rw-bad:  #ef6b5f;  --rw-bad-ink:  #f6a097;  --rw-bad-soft:  rgba(239, 107, 95, .16);  --rw-bad-line:  rgba(239, 107, 95, .40);
  --rw-purple-ink: #d4b8f2; --rw-purple-soft: rgba(170, 130, 230, .18);

  --rw-shadow-sm: 0 1px 0 rgba(0, 0, 0, .3);
  --rw-shadow:    0 8px 24px -8px rgba(0, 0, 0, .55);
  --rw-shadow-lg: 0 28px 70px -20px rgba(0, 0, 0, .75);
  --rw-scrim:     rgba(0, 0, 0, .6);
  --hq-ink-soft: rgba(236, 237, 241, .05);
}