/* @rovn/ui · tokens, the constitution. Three layers, strictly ordered:
   1. BRAND (raw values, only this file knows hex)
   2. SEMANTIC (what apps and components are allowed to reference)
   3. Component tokens live with their components, referencing SEMANTIC only.
   Rebrand, dark mode, white-label = edits to this file, never a repo-wide grep.
   tokens.ts mirrors these values as a typed object; this CSS file is the
   runtime source of truth and tokens.ts is derived from it. */

:root {
  /* ---- 1. BRAND ---- */
  --rovn-teal-700: #0E8A8A;       /* the brand color, canon-locked */
  --rovn-teal-900: #0A5454;
  --rovn-teal-950: #062E2E;
  --rovn-teal-100: #D7EAE9;
  --rovn-teal-050: #EAF3F2;
  --rovn-teal-line: #C9E2E0;      /* teal hairline border */
  --rovn-cream: #FBFBF9;
  --rovn-ink: #0E1A19;
  --rovn-amber-700: #93540A;
  --rovn-red-700: #B0271B;
  --rovn-blue-700: #24518F;

  /* Extended brand palette, the status families the readiness dashboard paints
     with. Raw hex lives here only; every dashboard-facing status token below is
     an alias onto these. Values mirror apps/readiness readiness.css exactly. */
  --rovn-green-700: #047857;      /* Canon verified emerald */
  --rovn-green-800: #075235;      /* Ready text on tint */
  --rovn-green-100: #E3F3EB;      /* green chip fill */
  --rovn-green-200: #BBE0CC;      /* green chip line */
  --rovn-amber-800: #7A4408;
  --rovn-amber-100: #FBEFD7;
  --rovn-amber-200: #E9D2A6;
  --rovn-red-800: #8E1F15;
  --rovn-red-100: #FBE7E3;
  --rovn-red-200: #F0C5BE;
  --rovn-blue-500: #1A4FA0;       /* human-decision blue (dashboard) */
  --rovn-blue-900: #143E82;
  --rovn-blue-100: #E8EEFA;
  --rovn-blue-200: #C5D5F0;
  --rovn-banner: #FBF3DD;         /* soft warm amber demo banner */
  --rovn-surface-elevated: #F1F2EF;
  --rovn-surface-sunken: #F4F5F2;
  --rovn-border: #E4E6E2;
  --rovn-border-strong: #C9CCC7;
  --rovn-text-secondary: #475250;
  --rovn-text-muted: #5E6866;

  --rovn-font-display: 'Fraunces', Georgia, serif;
  --rovn-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --rovn-font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* ---- 2. SEMANTIC ---- */
  --surface-canvas: var(--rovn-cream);
  --surface-card: #FFFFFF;
  --surface-raised: var(--rovn-surface-elevated);
  --surface-sunken: var(--rovn-surface-sunken);
  --text-primary: var(--rovn-ink);
  --text-secondary: var(--rovn-text-secondary);
  --text-muted: var(--rovn-text-muted);          /* WCAG AA at small sizes */
  --border-default: var(--rovn-border);
  --border-strong: var(--rovn-border-strong);
  --accent: var(--rovn-teal-700);
  --accent-deep: var(--rovn-teal-900);
  --accent-wash: var(--rovn-teal-050);
  --accent-line: var(--rovn-teal-100);

  /* Status, semantic, never decorative */
  --status-clear: var(--rovn-green-700);
  --status-expiring: var(--rovn-amber-700);
  --status-blocked: var(--rovn-red-700);
  --status-decide: var(--rovn-blue-700);

  /* Attestation states (spec exact words carry these colors everywhere) */
  --att-clear: var(--rovn-green-700);
  --att-ready: var(--rovn-blue-700);
  --att-stale: var(--rovn-amber-700);
  --att-expired: var(--rovn-red-700);
  --att-unavailable: var(--border-strong);

  /* Rhythm */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --radius-sm: 7px; --radius-md: 10px; --radius-base: 11px; --radius-lg: 15px; --radius-pill: 999px;
  --duration-fast: 120ms; --duration-normal: 250ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- 2b. SEMANTIC ALIASES (dashboard vocabulary) ----
     The readiness dashboard (apps/readiness/.../readiness.css) grew its own token
     names before this package existed. These aliases make @rovn/ui the canonical
     home for that exact vocabulary, so an app can import '@rovn/ui/tokens.css' and
     inherit the same names. Every alias points back at a BRAND value above, no new
     hex is introduced here. Do NOT edit the dashboard to match; this covers it. */

  /* Surfaces */
  --bg-canvas: var(--surface-canvas);
  --bg-surface: var(--surface-card);
  --bg-raised: var(--surface-card);
  --bg-elevated: var(--rovn-surface-elevated);
  --bg-sunken: var(--rovn-surface-sunken);
  --bg-banner: var(--rovn-banner);
  --bg-teal-wash: var(--rovn-teal-050);

  /* Borders */
  --border: var(--rovn-border);

  /* Brand teal ramp */
  --teal: var(--rovn-teal-700);
  --teal-deep: var(--rovn-teal-900);
  --teal-950: var(--rovn-teal-950);
  --teal-tint: var(--rovn-teal-100);
  --teal-soft: var(--rovn-teal-050);
  --teal-line: var(--rovn-teal-line);

  /* Status ramps */
  --green: var(--rovn-green-700);
  --green-deep: var(--rovn-green-800);
  --green-tint: var(--rovn-green-100);
  --green-line: var(--rovn-green-200);
  --amber: var(--rovn-amber-700);
  --amber-deep: var(--rovn-amber-800);
  --amber-tint: var(--rovn-amber-100);
  --amber-line: var(--rovn-amber-200);
  --red: var(--rovn-red-700);
  --red-deep: var(--rovn-red-800);
  --red-tint: var(--rovn-red-100);
  --red-line: var(--rovn-red-200);
  --blue: var(--rovn-blue-500);
  --blue-deep: var(--rovn-blue-900);
  --blue-tint: var(--rovn-blue-100);
  --blue-line: var(--rovn-blue-200);

  /* Fonts (dashboard names) */
  --font-display: var(--rovn-font-display);
  --font-ui: var(--rovn-font-ui);
  --font-mono: var(--rovn-font-mono);

  /* Radii (dashboard names) */
  --r-sm: var(--radius-sm);
  --r-md: var(--radius-md);
  --r: var(--radius-base);
  --r-lg: var(--radius-lg);

  /* Elevation (dashboard names) */
  --shadow-xs: 0 1px 2px rgba(14, 26, 25, 0.04);
  --shadow-sm: 0 1px 2px rgba(14, 26, 25, 0.05), 0 2px 8px rgba(14, 26, 25, 0.04);
  --shadow-md: 0 4px 14px rgba(14, 26, 25, 0.07), 0 1px 3px rgba(14, 26, 25, 0.05);
  --shadow-lg: 0 18px 44px rgba(14, 26, 25, 0.13);

  /* Motion (dashboard names) */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 180ms;
}

/* Wordmark: macron drawn by CSS, centered over the o, deterministic in every
   font. Markup: <span class="wm">R<span class="wm-o">o</span>vn</span> */
.wm .wm-o { position: relative; display: inline-block; }
.wm .wm-o::after {
  content: ''; position: absolute; left: 10%; right: 10%; top: 0.37em;
  height: 0.075em; background: currentColor; border-radius: 2px;
}