/* =====================================================================
   Advoke CV — Design Tokens
   Single source of truth for colours, spacing, typography, radii,
   shadows, motion, and layout constants. Every other stylesheet
   consumes these variables.
   ===================================================================== */

:root {

  /* ---------- Brand colours ---------- */
  --brand-900: #0d2a80;
  --brand-800: #1438a6;
  --brand-700: #173fae;
  --brand-600: #1f4ed8;
  --brand-500: #3b6bef;
  --brand-400: #6e8ff5;
  --brand-300: #a4baf9;
  --brand-200: #ccd8fc;
  --brand-100: #e5ecff;
  --brand-050: #f3f6ff;

  --accent-700: #0a7a6f;
  --accent-600: #0f9d8f;
  --accent-500: #23b8a8;
  --accent-100: #d9f5f0;
  --accent-050: #ecfaf7;

  /* ---------- Semantic colours ---------- */
  --ok-700: #166534;
  --ok-600: #15803d;
  --ok-100: #dcfce7;

  --warn-700: #92400e;
  --warn-600: #b45309;
  --warn-100: #fef3c7;

  --err-700: #991b1b;
  --err-600: #b91c1c;
  --err-100: #fee2e2;

  --info-700: #075985;
  --info-600: #0369a1;
  --info-100: #e0f2fe;

  /* ---------- Neutrals ---------- */
  --ink-900: #0b1220;
  --ink-800: #0f172a;
  --ink-700: #1e293b;
  --ink-600: #334155;
  --ink-500: #475569;
  --ink-400: #64748b;
  --ink-300: #94a3b8;
  --ink-200: #cbd5e1;
  --ink-100: #e2e8f0;
  --ink-050: #f1f5f9;
  --ink-025: #f8fafc;

  /* ---------- Surfaces ---------- */
  --bg: #ffffff;
  --bg-alt: #f6f8fb;
  --bg-sunken: #eef2f7;
  --surface: #ffffff;
  --surface-2: #f2f5fa;
  --surface-3: #e9eef5;
  --overlay: rgba(15, 23, 42, 0.45);

  /* ---------- Borders ---------- */
  --border: #e2e8f0;
  --border-soft: #eef2f7;
  --border-strong: #cbd5e1;
  --border-focus: var(--brand-600);

  /* ---------- Text ---------- */
  --text: var(--ink-800);
  --text-strong: var(--ink-900);
  --text-muted: var(--ink-500);
  --text-soft: var(--ink-400);
  --text-faint: var(--ink-300);
  --text-invert: #ffffff;
  --text-link: var(--brand-600);
  --text-link-hover: var(--brand-700);

  /* ---------- Radius ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---------- Spacing scale (4px base) ---------- */
  --s-0: 0px;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-9: 36px;
  --s-10: 40px;
  --s-12: 48px;
  --s-14: 56px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ---------- Typography ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-serif: Georgia, "Times New Roman", "Cambria", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;

  --fs-2xs: 0.6875rem;  /* 11px */
  --fs-xs:  0.75rem;    /* 12px */
  --fs-sm:  0.875rem;   /* 14px */
  --fs-md:  0.9375rem;  /* 15px */
  --fs-base:1rem;       /* 16px */
  --fs-lg:  1.125rem;   /* 18px */
  --fs-xl:  1.25rem;    /* 20px */
  --fs-2xl: 1.5rem;     /* 24px */
  --fs-3xl: 1.875rem;   /* 30px */
  --fs-4xl: 2.25rem;    /* 36px */
  --fs-5xl: 3rem;       /* 48px */
  --fs-6xl: 3.75rem;    /* 60px */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;
  --lh-loose: 1.85;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.02em;
  --ls-wider: 0.06em;
  --ls-widest: 0.14em;

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08),
               0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 6px 16px rgba(15, 23, 42, 0.08),
               0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.12),
               0 4px 8px rgba(15, 23, 42, 0.05);
  --shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.16),
               0 8px 16px rgba(15, 23, 42, 0.08);
  --shadow-inset: inset 0 1px 2px rgba(15, 23, 42, 0.06);

  /* ---------- Layout constants ---------- */
  --container-sm: 720px;
  --container-md: 960px;
  --container: 1180px;
  --container-lg: 1320px;
  --container-narrow: 760px;
  --header-h: 64px;
  --footer-h: auto;

  /* ---------- Editor workspace ---------- */
  --editor-left-w: 240px;
  --editor-right-w: 520px;
  --editor-gap: 16px;

  /* ---------- Resume canvas ---------- */
  --resume-page-w: 794px;   /* A4 @ 96 DPI */
  --resume-page-h: 1123px;
  --resume-page-pad: 48px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 280ms;

  /* ---------- Focus ring ---------- */
  --focus-ring: 0 0 0 3px rgba(31, 78, 216, 0.35);
  --focus-ring-error: 0 0 0 3px rgba(185, 28, 28, 0.3);

  /* ---------- Z-index scale ---------- */
  --z-base: 1;
  --z-dropdown: 50;
  --z-sticky: 60;
  --z-header: 70;
  --z-overlay: 150;
  --z-dialog: 160;
  --z-toast: 200;
  --z-tooltip: 250;

  /* ---------- Code / preview defaults ---------- */
  --preview-bg: #f8fafc;
  --preview-shadow: var(--shadow-lg);

  /* ---------- Print defaults (referenced by print.css) ---------- */
  --print-page-size: A4;
  --print-margin: 14mm;
}

/* =====================================================================
   Reduced motion — respect user preference globally
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   High contrast — boost border visibility when the OS requests it
   ===================================================================== */
@media (prefers-contrast: more) {
  :root {
    --border: #94a3b8;
    --border-strong: #475569;
    --text-muted: #334155;
    --text-soft: #475569;
  }
}

/* =====================================================================
   Print tokens
   ===================================================================== */
@media print {
  :root {
    --bg: #ffffff;
    --bg-alt: #ffffff;
    --surface: #ffffff;
    --surface-2: #ffffff;
    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
  }
}