/* Rack Office — design tokens v0.1 (proposal, not approved)
   Direction: 01 Upright. Light is the default; dark via [data-theme="dark"].
   Contrast ratios (WCAG 2.x) are listed where a pairing is intended for text. */

:root {
  /* ── Brand ─────────────────────────────────────────── */
  --ro-blue: #2B3BEF;          /* Rack Blue · primary action, selection, filled slots · white text 7.06:1 */
  --ro-blue-deep: #1F28B8;     /* hover/pressed · text on tint 8.66:1 */
  --ro-blue-light: #8C96FF;    /* accent on dark · 6.57:1 on #171A21 */
  --ro-blue-tint: #E9EBFF;     /* selected rows, focus fill */

  /* ── Steel neutrals ────────────────────────────────── */
  --ro-graphite: #15171C;      /* text · 17.93:1 on white, 16.27:1 on chalk */
  --ro-steel-700: #3A3F49;     /* strong secondary text · 10.57:1 on white */
  --ro-steel-600: #5C6270;     /* secondary text · 6.11:1 on white, 5.55:1 on chalk */
  --ro-steel-400: #9AA0AB;     /* disabled only — never text (2.63:1) */
  --ro-steel-300: #C9CDD6;     /* strong borders */
  --ro-steel-200: #E2E4E9;     /* hairlines, empty slots */
  --ro-steel-100: #EDEEF1;     /* subtle fills */
  --ro-chalk: #F4F4F1;         /* app/page background */
  --ro-white: #FFFFFF;         /* surfaces only */

  /* ── Night (dark mode) ─────────────────────────────── */
  --ro-night-950: #0F1115;
  --ro-night-900: #171A21;
  --ro-night-800: #20242D;
  --ro-night-700: #2C313C;
  --ro-fog: #ECEEF2;           /* 16.27:1 on night-950 */
  --ro-fog-2: #A3A9B5;         /* 7.38:1 on night-900 */

  /* ── Functional (never brand) ──────────────────────── */
  --ro-success: #0E7A4F;       --ro-success-fill: #E3F3EA;   /* 4.67:1 on fill */
  --ro-warning: #7A5300;       --ro-warning-fill: #FFF2CC;   /* 6.14:1 on fill */
  --ro-warning-solid: #F2B01E; /* graphite text 9.40:1 */
  --ro-error: #C2263A;         --ro-error-fill: #FDE7EA;     /* 4.90:1 on fill · white on solid 5.78:1 */
  --ro-info: #1F28B8;          --ro-info-fill: #E9EBFF;

  /* ── Semantic (light) ──────────────────────────────── */
  --ro-bg: var(--ro-chalk);
  --ro-surface: var(--ro-white);
  --ro-raised: var(--ro-white);
  --ro-line: var(--ro-steel-200);
  --ro-line-strong: var(--ro-steel-300);
  --ro-text: var(--ro-graphite);
  --ro-text-2: var(--ro-steel-600);
  --ro-accent: var(--ro-blue);         /* fills: primary button, filled slot */
  --ro-accent-text: var(--ro-blue);    /* links, selected labels */
  --ro-on-accent: #FFFFFF;
  --ro-selection: var(--ro-blue-tint);
  --ro-slot-empty: var(--ro-steel-200);
  --ro-slot-filled: var(--ro-blue);
  --ro-focus-ring: 0 0 0 2px var(--ro-surface), 0 0 0 4px var(--ro-blue);

  /* ── Type ──────────────────────────────────────────── */
  --ro-font: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --ro-font-mono: "Chivo Mono", ui-monospace, Menlo, monospace;
  --ro-display-stretch: 112%;          /* SemiExpanded — headlines and big numbers only */
  --ro-numeric: "tnum" 1, "lnum" 1;    /* default in product UI */

  --ro-text-display-xl: 800 72px/72px var(--ro-font);   /* letter-spacing -0.02em, stretch 112% */
  --ro-text-h1: 800 44px/48px var(--ro-font);           /* -0.015em, stretch 112% */
  --ro-text-h2: 700 30px/36px var(--ro-font);           /* -0.01em, stretch 112% */
  --ro-text-h3: 700 20px/26px var(--ro-font);           /* stretch 112% */
  --ro-text-body-l: 400 17px/26px var(--ro-font);
  --ro-text-body: 400 15px/22px var(--ro-font);
  --ro-text-label: 500 13px/18px var(--ro-font);
  --ro-text-caption: 500 12px/16px var(--ro-font);
  --ro-text-eyebrow: 650 12px/16px var(--ro-font);      /* uppercase, +0.09em, stretch 112% */
  --ro-text-kpi: 700 40px/44px var(--ro-font);          /* stretch 112%, tabular */
  --ro-text-table: 400 14px/20px var(--ro-font);        /* tabular, numbers right-aligned */
  --ro-text-mono: 400 13px/18px var(--ro-font-mono);    /* "zero" 1 for slashed zero */

  /* ── Shape ─────────────────────────────────────────── */
  --ro-radius-s: 4px;          /* inputs, chips */
  --ro-radius-m: 8px;          /* buttons, cards */
  --ro-radius-l: 12px;         /* panels, sheets */
  --ro-radius-icon: 22.5%;     /* app icon only */
  --ro-radius-full: 999px;     /* slots and status pills only */
  --ro-border: 1px solid var(--ro-line);
  --ro-shadow-overlay: 0 12px 32px rgba(21, 23, 28, 0.16);  /* menus, dialogs, toasts only */

  /* ── Space (4-pt grid) ─────────────────────────────── */
  --ro-space-1: 4px;  --ro-space-2: 8px;  --ro-space-3: 12px; --ro-space-4: 16px;
  --ro-space-5: 24px; --ro-space-6: 32px; --ro-space-7: 48px; --ro-space-8: 64px; --ro-space-9: 96px;

  /* ── Slot (capacity, progress, position, tear line) ── */
  --ro-slot-w: 6px;
  --ro-slot-h: 16px;
  --ro-slot-gap: 3px;
  --ro-slot-ratio: 2.5;        /* height = 2.5 × width, fully rounded */

  /* ── Motion ────────────────────────────────────────── */
  --ro-ease: cubic-bezier(.2, .7, .2, 1);
  --ro-fill-duration: 160ms;   /* each slot */
  --ro-fill-stagger: 40ms;     /* left to right */
}

[data-theme="dark"] {
  --ro-bg: var(--ro-night-950);
  --ro-surface: var(--ro-night-900);
  --ro-raised: var(--ro-night-800);
  --ro-line: var(--ro-night-700);
  --ro-line-strong: #3A3F49;
  --ro-text: var(--ro-fog);
  --ro-text-2: var(--ro-fog-2);
  --ro-accent: var(--ro-blue);          /* buttons keep Rack Blue + white text */
  --ro-accent-text: var(--ro-blue-light);
  --ro-selection: #232A4D;
  --ro-slot-empty: var(--ro-night-700);
  --ro-slot-filled: var(--ro-blue-light); /* Rack Blue on night is 2.47:1 — too low for meaning */
  --ro-success: #3DD68C; --ro-success-fill: #173326;
  --ro-warning: #F5C04A; --ro-warning-fill: #3A2F12;
  --ro-error: #FF7A87;   --ro-error-fill: #3A1C22;
  --ro-info: var(--ro-blue-light); --ro-info-fill: #232A4D;
}

@media (prefers-reduced-motion: reduce) {
  :root { --ro-fill-duration: 0ms; --ro-fill-stagger: 0ms; }
}