/*
 * SkillFlow design tokens: the single source of truth for colour, type,
 * spacing, radius, elevation and motion.
 *
 * Rules: design-system/UI_RULES.md. Never hard-code a value that exists here.
 * No off-brand hues, gradients or glows appear in this file, on purpose.
 * scripts/check-ui-rules.mjs enforces that in CI.
 */

@font-face { font-family: 'CoFo Brilliant'; src: url('/fonts/cofo_brilliant_regular-s.p.0x-1wd4a7iit8.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'CoFo Brilliant'; src: url('/fonts/cofo_brilliant_medium-s.p.1vop2d5y_jpw2.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'CoFo Brilliant'; src: url('/fonts/cofo_brilliant_bold-s.p.00peqb48xfqwb.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'CoFo Robert'; src: url('/fonts/cofo_robert_medium-s.p.3krozkcg6qt-u.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  /* ---------- Raw palette (use the semantic tokens below in components) ---------- */
  --navy-950: #04101f;
  --navy-900: #061a30;
  --navy-800: #0a2540;
  --navy-700: #123b6b;
  --navy-600: #1d4f86;
  --navy-100: #e3eaf3;

  --gold-700: #7d6218;   /* gold text on light backgrounds (5.8:1 on white) */
  --gold-600: #a8862a;
  --gold-500: #d4af37;   /* primary action fill; text on it is navy-900 */
  --gold-400: #f2c94c;   /* hover of gold-500; gold text on navy */
  --gold-100: #fbf3dc;

  --gray-0:   #ffffff;
  --gray-50:  #f4f6fa;
  --gray-100: #e9edf3;
  --gray-200: #dfe5ee;
  --gray-300: #c3cfe0;
  --gray-500: #5b6b84;
  --gray-700: #33415a;

  --green-600: #2e9e5b;  --green-100: #e3f4ea;
  --amber-600: #b7791f;  --amber-100: #fbf0dc;
  --red-600:   #c53b3b;  --red-100:   #fbe7e7;
  --blue-600:  #1d6fb8;  --blue-100:  #e2eef9;

  /* ---------- Semantic colour ---------- */
  --color-bg:            var(--gray-50);    /* page */
  --color-surface:       var(--gray-0);     /* cards, panels, inputs */
  --color-surface-muted: var(--gray-100);   /* table header, track, disabled */
  --color-surface-inverse: var(--navy-900); /* hero bands, sidebars, dark panels */

  --color-text:          var(--navy-900);
  --color-text-muted:    var(--gray-500);
  --color-text-inverse:  var(--gray-0);
  --color-text-inverse-muted: var(--gray-300);
  --color-text-accent:   var(--gold-700);   /* gold text on light */
  --color-text-accent-inverse: var(--gold-400); /* gold text on navy */

  --color-border:        var(--gray-200);
  --color-border-strong: var(--gray-300);
  --color-border-inverse: rgba(255, 255, 255, 0.14);

  --color-primary:       var(--gold-500);
  --color-primary-hover: var(--gold-400);
  --color-on-primary:    var(--navy-900);
  --color-secondary:     var(--navy-800);
  --color-secondary-hover: var(--navy-700);
  --color-on-secondary:  var(--gray-0);

  --color-success: var(--green-600);  --color-success-bg: var(--green-100);
  --color-warning: var(--amber-600);  --color-warning-bg: var(--amber-100);
  --color-danger:  var(--red-600);    --color-danger-bg:  var(--red-100);
  --color-info:    var(--blue-600);   --color-info-bg:    var(--blue-100);

  --color-focus: var(--gold-500);
  --color-overlay: rgba(4, 16, 31, 0.55);   /* modal scrim: flat, never a gradient */

  /* Charts: categorical order; never rely on colour alone. */
  --chart-1: #123b6b;  /* navy */
  --chart-2: #d4af37;  /* gold */
  --chart-3: #1f8a8a;  /* teal */
  --chart-4: #c2553a;  /* terracotta */
  --chart-5: #2e9e5b;  /* green */
  --chart-6: #5b6b84;  /* slate */

  /* ---------- Type ---------- */
  --font-display: 'CoFo Robert', 'CoFo Brilliant', Georgia, serif;          /* h1/h2 only */
  --font-body: 'CoFo Brilliant', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-12: 0.75rem;   --fs-14: 0.875rem;  --fs-16: 1rem;     --fs-18: 1.125rem;
  --fs-20: 1.25rem;   --fs-24: 1.5rem;    --fs-30: 1.875rem; --fs-38: 2.375rem;
  --fs-48: 3rem;

  --lh-tight: 1.1;    /* display headings */
  --lh-snug: 1.3;     /* h3-h5, card titles */
  --lh-body: 1.55;    /* paragraphs */

  --fw-regular: 400;  --fw-medium: 500;  --fw-bold: 700;

  /* ---------- Space (4px base) ---------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  --gutter: var(--space-4);        /* phone side padding; 24px from 768px */
  --content-max: 1160px;           /* marketing/landing */
  --app-max: 1280px;               /* portal content */
  --reading-max: 68ch;             /* long text */

  /* ---------- Shape ---------- */
  --radius-sm: 6px;    /* inputs, small buttons, tags */
  --radius-md: 10px;   /* buttons, cards */
  --radius-lg: 14px;   /* large panels, modals */
  --radius-full: 999px;/* avatars, status dots, pills */

  --border-width: 1px;

  /* ---------- Elevation: borders first; shadows only for floating layers ---------- */
  --shadow-overlay: 0 12px 32px rgba(6, 26, 48, 0.18), 0 2px 6px rgba(6, 26, 48, 0.08); /* menus, modals, toasts */

  /* ---------- Motion ---------- */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---------- Layers ---------- */
  --z-sticky: 50; --z-drawer: 80; --z-modal: 100; --z-toast: 120;

  /* ---------- Sizes ---------- */
  --control-h-sm: 36px;
  --control-h: 40px;
  --control-h-lg: 48px;
  --touch-min: 44px;
  --sidebar-w: 248px;
  --topbar-h: 60px;
  --tabbar-h: 64px;
}

@media (min-width: 768px) {
  :root { --gutter: var(--space-6); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; }
}