/* Advoke CV — Design Tokens (Yellow + White Brand)
   Single source of truth for the entire design system. */

:root {
  /* ── Brand palette ─────────────────────────────────────── */
  --yellow-50:  #FFFBEB;
  --yellow-100: #FFF4CC;
  --yellow-200: #FFE799;
  --yellow-300: #FFDA6B;
  --yellow-400: #FFC933;
  --yellow-500: #F5B800;
  --yellow-600: #D99E00;
  --yellow-700: #B37F00;
  --yellow-800: #8C6400;

  --ink-950: #060A16;
  --ink-900: #0F172A;
  --ink-800: #1E293B;
  --ink-700: #334155;
  --ink-600: #475569;
  --ink-500: #64748B;
  --ink-400: #94A3B8;
  --ink-300: #CBD5E1;
  --ink-200: #E2E8F0;
  --ink-100: #F1F5F9;
  --ink-50:  #F8FAFC;

  --white: #FFFFFF;
  --white-warm: #FFFDF6;
  --white-cream: #FFFCF0;

  /* ── Semantic colours ─────────────────────────────────── */
  --color-bg:            var(--white);
  --color-bg-warm:       var(--white-warm);
  --color-bg-soft:       var(--yellow-50);
  --color-bg-subtle:     var(--ink-50);
  --color-surface:       var(--white);
  --color-surface-raised: var(--white);
  --color-surface-sunken: var(--ink-50);
  --color-border:        var(--ink-200);
  --color-border-strong: var(--ink-300);
  --color-border-subtle: var(--ink-100);
  --color-text:          var(--ink-900);
  --color-text-secondary: var(--ink-700);
  --color-text-muted:    var(--ink-500);
  --color-text-subtle:   var(--ink-400);
  --color-text-inverse:  var(--white);

  --color-accent:        var(--yellow-500);
  --color-accent-hover:  var(--yellow-600);
  --color-accent-active: var(--yellow-700);
  --color-accent-soft:   var(--yellow-100);
  --color-accent-tint:   var(--yellow-50);
  --color-accent-text:   var(--ink-900);

  --color-success: #15803D;
  --color-success-bg: #DCFCE7;
  --color-warning: #B45309;
  --color-warning-bg: #FEF3C7;
  --color-danger:  #B91C1C;
  --color-danger-bg: #FEE2E2;
  --color-info:    #075985;
  --color-info-bg: #E0F2FE;

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

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    800;

  --line-height-tight:   1.15;
  --line-height-snug:    1.3;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.65;
  --line-height-loose:   1.85;

  --letter-spacing-tight:  -0.03em;
  --letter-spacing-snug:   -0.015em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.02em;
  --letter-spacing-wider:  0.08em;

  /* ── Fluid type scale ─────────────────────────────────── */
  --text-2xs:  clamp(0.66rem, 0.64rem + 0.10vw, 0.6875rem);
  --text-xs:   clamp(0.72rem, 0.68rem + 0.15vw, 0.75rem);
  --text-sm:   clamp(0.82rem, 0.79rem + 0.18vw, 0.875rem);
  --text-base: clamp(0.95rem, 0.92rem + 0.20vw, 1rem);
  --text-lg:   clamp(1.06rem, 1.00rem + 0.30vw, 1.125rem);
  --text-xl:   clamp(1.20rem, 1.10rem + 0.50vw, 1.25rem);
  --text-2xl:  clamp(1.44rem, 1.30rem + 0.70vw, 1.5rem);
  --text-3xl:  clamp(1.75rem, 1.55rem + 1.00vw, 1.875rem);
  --text-4xl:  clamp(2.10rem, 1.80rem + 1.50vw, 2.25rem);
  --text-5xl:  clamp(2.60rem, 2.10rem + 2.50vw, 3rem);
  --text-6xl:  clamp(3.20rem, 2.50rem + 3.50vw, 3.75rem);
  --text-7xl:  clamp(3.90rem, 2.90rem + 5.00vw, 4.5rem);

  /* ── Spacing scale (4px base) ─────────────────────────── */
  --space-0:  0;
  --space-px: 1px;
  --space-0-5: 0.125rem;
  --space-1:  0.25rem;
  --space-1-5: 0.375rem;
  --space-2:  0.5rem;
  --space-2-5: 0.625rem;
  --space-3:  0.75rem;
  --space-3-5: 0.875rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Radii ────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-xl:  14px;
  --radius-2xl: 20px;
  --radius-3xl: 28px;
  --radius-full: 9999px;

  /* ── Shadows (warm-tinted) ────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm:  0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:  0 4px 8px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg:  0 10px 20px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04);
  --shadow-xl:  0 20px 32px rgba(15, 23, 42, 0.10), 0 8px 16px rgba(15, 23, 42, 0.05);
  --shadow-2xl: 0 32px 60px rgba(15, 23, 42, 0.14);
  --shadow-accent: 0 8px 24px rgba(245, 184, 0, 0.28);
  --shadow-accent-lg: 0 12px 32px rgba(245, 184, 0, 0.36);
  --shadow-inset: inset 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-inset-accent: inset 0 1px 2px rgba(245, 184, 0, 0.18);

  /* ── Motion ───────────────────────────────────────────── */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce:   cubic-bezier(0.68, -0.55, 0.27, 1.55);
  --duration-instant: 80ms;
  --duration-fast:    140ms;
  --duration-base:    200ms;
  --duration-slow:    320ms;
  --duration-slower:  480ms;

  /* ── Z-index scale ────────────────────────────────────── */
  --z-below: -1;
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-dropdown: 400;
  --z-modal-backdrop: 500;
  --z-modal: 510;
  --z-toast: 600;
  --z-tooltip: 700;
  --z-max: 9999;

  /* ── Layout ───────────────────────────────────────────── */
  --container-xs:  40rem;
  --container-sm:  48rem;
  --container-md:  56rem;
  --container-lg:  64rem;
  --container-xl:  72rem;
  --container-2xl: 80rem;
  --container-3xl: 88rem;

  --header-height: 64px;
  --header-height-mobile: 56px;
  --footer-height: auto;

  /* ── Focus ring ───────────────────────────────────────── */
  --focus-ring-width:  2px;
  --focus-ring-offset: 2px;
  --focus-ring-color:  var(--yellow-500);

  /* ── Border ───────────────────────────────────────────── */
  --border-width: 1px;
  --border-width-strong: 2px;

  /* ── Transition presets ───────────────────────────────── */
  --transition-colors: color var(--duration-fast) var(--ease-out),
                       background-color var(--duration-fast) var(--ease-out),
                       border-color var(--duration-fast) var(--ease-out),
                       fill var(--duration-fast) var(--ease-out),
                       stroke var(--duration-fast) var(--ease-out);
  --transition-transform: transform var(--duration-base) var(--ease-out);
  --transition-shadow:    box-shadow var(--duration-base) var(--ease-out);
  --transition-opacity:   opacity var(--duration-fast) var(--ease-out);
  --transition-all:       all var(--duration-base) var(--ease-out);

  /* ── Resume paper variables ───────────────────────────── */
  --paper-width-a4:     210mm;
  --paper-height-a4:    297mm;
  --paper-width-letter: 8.5in;
  --paper-height-letter: 11in;
  --paper-shadow: 0 1px 3px rgba(15, 23, 42, 0.08),
                  0 8px 24px rgba(15, 23, 42, 0.10),
                  0 24px 48px rgba(15, 23, 42, 0.08);
  --paper-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast:    0ms;
    --duration-base:    0ms;
    --duration-slow:    0ms;
    --duration-slower:  0ms;
  }
}