/**
 * Fenix design tokens — Brand palette (Blue #225BCF + Gold #CF9622).
 * Canonical :root / --fx-* source for Agent consumers (chrome, pages, app).
 * Light paper default; ink is charcoal text / sparse chrome, not full-page dark.
 */

:root {
  /* ——— Core semantic ——— */
  --fx-ink: #212225;
  --fx-paper: #f0f1f1;
  --fx-paper-2: #feecda;
  /* Brand gold FILL only — never use --fx-ember as text on paper/blue (~2.3:1). */
  --fx-ember: #cf9622;
  /* Hover gold: slightly softer than old #a07318 so dark labels stay ≥4.5:1. */
  --fx-ember-hover: #b3851c;
  /* Gold TEXT on light surfaces (AAA ≥7:1 on #F0F1F1 / #EEF0FE / #FEECDA). */
  --fx-ember-on-paper: #68480c;
  --fx-accent: #225bcf;
  --fx-accent-hover: #143c8d;
  --fx-accent-soft: #eef0fe;
  /* Chrome menu aliases (consume --fx-accent / gold CTA fills) */
  --fx-menu-bg: var(--fx-accent);
  --fx-menu-fg: #f0f1f1;
  --fx-menu-cta: var(--fx-ember);
  --fx-menu-cta-hover: var(--fx-ember-hover);
  --fx-pine: #143c8d;
  /* Captions / kickers — AAA on paper (was #616269 @ ~5.4:1). */
  --fx-muted: #4a4c52;
  --fx-line: color-mix(in srgb, #212225 12%, transparent);
  --fx-line-on-dark: color-mix(in srgb, #f0f1f1 12%, transparent);
  --fx-text-on-ink: #f0f1f1;
  --fx-text-on-paper: #212225;
  /* Gold fill button labels (AAA on #CF9622; AA+ on hover). Light labels fail (~2.3:1). */
  --fx-text-on-ember: #0e1012;
  /* Body links: blue AA; hover uses dark gold text (not raw brand gold). */
  --fx-link: var(--fx-accent);
  --fx-link-hover: var(--fx-ember-on-paper);

  /* ——— Blue scale ——— */
  --fx-blue-50: #eef0fe;
  --fx-blue-100: #c9d1fc;
  --fx-blue-200: #94a8f9;
  --fx-blue-300: #5780f5;
  --fx-blue-400: #225bcf;
  --fx-blue-500: #143c8d;
  --fx-blue-600: #071f50;

  /* ——— Gold scale ——— */
  --fx-gold-50: #feecda;
  --fx-gold-100: #fdbb47;
  --fx-gold-200: #cf9622;
  --fx-gold-300: #b3851c;
  --fx-gold-400: #68480c;
  --fx-gold-500: #4a3306;
  --fx-gold-600: #241701;

  /* ——— Gray scale ——— */
  --fx-gray-50: #f0f1f1;
  --fx-gray-100: #d3d3d5;
  --fx-gray-200: #abacb0;
  --fx-gray-300: #85868d;
  --fx-gray-400: #4a4c52;
  --fx-gray-500: #404045;
  --fx-gray-600: #212225;

  /* ——— Type & rhythm (unchanged structure) ——— */
  --fx-font-display: "Red Hat Display", ui-sans-serif, system-ui, sans-serif;
  --fx-font-text: "Red Hat Text", ui-sans-serif, system-ui, sans-serif;
  --fx-body: 1rem;
  --fx-kicker: 0.75rem;
  --fx-kicker-leading: 1.4;
  --fx-h1: clamp(2rem, 4vw, 3.25rem);
  --fx-h1-leading: 1.15;
  --fx-h2: clamp(1.5rem, 2.5vw, 2.125rem);
  --fx-h2-leading: 1.22;
  --fx-h3: clamp(1.125rem, 1.5vw, 1.375rem);
  --fx-heading-leading: 1.2;
  --fx-caption: 0.8125rem;
  --fx-measure: 62ch;
  --fx-leading: 1.6;
  --fx-radius-control: 6px;
  --fx-radius-btn: 8px;
  --fx-radius-media: 12px;
  --fx-radius-container: 16px;
  --fx-space-1: 0.25rem;
  --fx-space-2: 0.5rem;
  --fx-space-3: 0.75rem;
  --fx-space-4: 1rem;
  --fx-space-5: 1.25rem;
  --fx-space-6: 1.5rem;
  --fx-space-8: 2rem;
  --fx-space-10: 2.5rem;
  --fx-space-12: 3rem;
  --fx-space-16: 4rem;
  --fx-section-y: clamp(4rem, 8vw, 6.5rem);
  --fx-shell-max: 80rem;
  --fx-shell-gutter: 1.25rem;
  --fx-btn-h: 44px;
  --fx-duration: 0.18s;
  --fx-ease: ease;
  --fx-focus-ring: 2px solid var(--fx-ember);
  --fx-focus-offset: 2px;

  /* ——— Bridge aliases (Tailwind / theme.json consumers) ——— */
  --color-primary: var(--fx-ember);
  --color-primary-light: var(--fx-ember-hover);
  --color-primary-deep: var(--fx-ember-hover);
  --color-secondary: var(--fx-accent);
  --color-secondary-light: var(--fx-paper-2);
  --color-dark: var(--fx-ink);
  --color-ink-deep: var(--fx-ink);
  --color-surface: var(--fx-gray-500);
  --color-surface-raised: var(--fx-gray-500);
  --color-line: var(--fx-line);
  --color-light: var(--fx-paper);
  --color-muted: var(--fx-muted);
  --color-focus: var(--fx-accent);
  --font-sans: var(--fx-font-text);
  --font-display: var(--fx-font-display);
  --font-serif: var(--fx-font-display);
}

html {
  background-color: var(--fx-paper);
  color: var(--fx-text-on-paper);
}

body {
  background-color: var(--fx-paper);
  color: var(--fx-text-on-paper);
}