/* =========================================================================
   Advoke CV — Design Tokens
   Single source of truth for color, spacing, radius, shadow, type, motion.
   Palette: professional yellow + white on light neutral surfaces.
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------------
     Brand — Yellow ramp
     The primary brand signal. Used for accents, focus rings, highlights,
     and the header rule. Never used for body text.
     --------------------------------------------------------------------- */
  --brand-50:  #fffdf2;
  --brand-100: #fff9db;
  --brand-200: #fff2b0;
  --brand-300: #ffe880;
  --brand-400: #ffd94d;
  --brand-500: #f5c518;   /* primary brand yellow */
  --brand-600: #d9a800;
  --brand-700: #a97f00;
  --brand-800: #7a5c00;
  --brand-900: #4a3700;

  /* ---------------------------------------------------------------------
     Neutral — Ink ramp (dark navy → charcoal → greys → white)
     Body text, borders, surfaces.
     --------------------------------------------------------------------- */
  --ink-950: #0b1220;
  --ink-900: #111a2e;
  --ink-800: #1c2740;
  --ink-700: #2a3category: a55;
  --ink-700: #2a3555;
  --ink-600: #3d4a6b;
  --ink-500: #57648a;
  --ink-400: #7a86a8;
  --ink-300: #a4adc7;
  --ink-200: #c9d0e0;
  --ink-100: #e4e8f1;
  --ink-50:  #f4f6fb;
  --white:   #ffffff;

  /* Warm off-white surfaces so the yellow reads as deliberate, not washed. */
  --surface-0: var(--white);
  --surface-1: #fffef9;
  --surface-2: #fbfaf5;
  --surface-3: #f6f4ec;
  --surface-4: #efece0;

  /* ---------------------------------------------------------------------
     Semantic — Text
     --------------------------------------------------------------------- */
  --text-primary:   var(--ink-950);
  --text-secondary: var(--ink-600);
  --text-tertiary:  var(--ink-400);
  --text-inverse:   var(--white);
  --text-brand:     var(--brand-700);
  --text-on-brand:  var(--ink-950);

  /* ---------------------------------------------------------------------
     Semantic — Backgrounds
     --------------------------------------------------------------------- */
  --bg-page:        var(--surface-1);
  --bg-surface:     var(--surface-0);
  --bg-surface-alt: var(--surface-2);
  --bg-surface-sunk:var(--surface-3);
  --bg-brand:       var(--brand-500);
  --bg-brand-soft:  var(--brand-100);
  --bg-inverse:     var(--ink-950);
  --bg-overlay:     rgba(11, 18, 32, 0.55);

  /* ---------------------------------------------------------------------
     Semantic — Borders
     --------------------------------------------------------------------- */
  --border-subtle: var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong:  var(--ink-300);
  --border-brand:   var(--brand-500);
  --border-inverse: rgba(255, 255, 255, 0.14);

  /* ---------------------------------------------------------------------
     Semantic — Status
     --------------------------------------------------------------------- */
  --success-50:  #ecfdf5;
  --success-500: #10b981;
  --success-700: #047857;

  --warning-50:  #fffbeb;
  --warning-500: #f59e0b;
  --warning-700: #b45309;

  --danger-50:  #fef2f2;
  --danger-500: #ef4444;
  --danger-700: #b91c1c;

  --info-50:  #eff6ff;
  --info-500: #3b82f6;
  --info-700: #1d4ed8;

  /* ---------------------------------------------------------------------
     Spacing scale (4px base)
     --------------------------------------------------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-7:  1.75rem;   /* 28px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-14: 3.5rem;    /* 56px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* ---------------------------------------------------------------------
     Radius
     --------------------------------------------------------------------- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ---------------------------------------------------------------------
     Shadow — subtle, professional, warm-tinted
     --------------------------------------------------------------------- */
  --shadow-xs:  0 1px 2px rgba(17, 26, 46, 0.05);
  --shadow-sm:  0 1px 3px rgba(17, 26, 46, 0.06), 0 1px 2px rgba(17, 26, 46, 0.04);
  --shadow-md:  0 4px 10px rgba(17, 26, 46, 0.07), 0 2px 4px rgba(17, 26, 46, 0.04);
  --shadow-lg:  0 10px 24px rgba(17, 26, 46, 0.09), 0 4px 8px rgba(17, 26, 46, 0.04);
  --shadow-xl:  0 20px 40px rgba(17, 26, 46, 0.11), 0 8px 16px rgba(17, 26, 46, 0.05);
  --shadow-2xl: 0 32px 64px rgba(17, 26, 46, 0.14), 0 12px 24px rgba(17, 26, 46, 0.06);
  --shadow-brand: 0 8px 24px rgba(245, 197, 24, 0.28);
  --shadow-inset: inset 0 1px 2px rgba(17, 26, 46, 0.06);

  /* Focus ring — yellow, thick enough to be visible, offset so it never
     sits inside the element it is outlining. */
  --focus-ring: 0 0 0 3px var(--brand-300);
  --focus-ring-offset: 2px;

  /* ---------------------------------------------------------------------
     Typography
     --------------------------------------------------------------------- */
  --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Georgia', 'Iowan Old Style', 'Times New Roman', Times, serif;
  --font-mono: 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', monospace;

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

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.06em;
  --tracking-widest:  0.12em;

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

  /* ---------------------------------------------------------------------
     Layout containers
     --------------------------------------------------------------------- */
  --container-xs:  30rem;   /*  480px */
  --container-sm:  40rem;   /*  640px */
  --container-md:  48rem;   /*  768px */
  --container-lg:  64rem;   /* 1024px */
  --container-xl:  80rem;   /* 1280px */
  --container-2xl: 90rem;   /* 1440px */
  --container-max: 82rem;   /* 1312px — comfortable reading width with gutters */

  --gutter-mobile:  var(--space-4);
  --gutter-tablet:  var(--space-6);
  --gutter-desktop: var(--space-8);

  --header-height: 60px;
  --header-height-desktop: 68px;

  /* ---------------------------------------------------------------------
     Z-index scale
     --------------------------------------------------------------------- */
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-drawer:    300;
  --z-overlay:   400;
  --z-modal:     500;
  --z-toast:     600;
  --z-skip:      700;

  /* ---------------------------------------------------------------------
     Motion
     --------------------------------------------------------------------- */
  --ease-standard:  cubic-bezier(0.2, 0, 0.2, 1);
  --ease-decelerate:cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate:cubic-bezier(0.4, 0, 1, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-instant: 60ms;
  --duration-fast:    120ms;
  --duration-base:    180ms;
  --duration-slow:    260ms;
  --duration-slower:  400ms;

  /* ---------------------------------------------------------------------
     Resume document tokens (defaults; overridden per theme)
     --------------------------------------------------------------------- */
  --resume-accent:        var(--brand-500);
  --resume-accent-soft:   var(--brand-100);
  --resume-ink:           var(--ink-950);
  --resume-ink-soft:      var(--ink-600);
  --resume-muted:         var(--ink-400);
  --resume-rule:          var(--ink-200);
  --resume-surface:       var(--white);
  --resume-heading-font:  var(--font-sans);
  --resume-body-font:     var(--font-sans);
  --resume-heading-weight: var(--weight-bold);
  --resume-heading-transform: none;
  --resume-heading-tracking: var(--tracking-tight);
  --resume-section-gap:   1.1rem;
  --resume-entry-gap:     0.85rem;
  --resume-line-height:   1.45;
  --resume-font-scale:    1;
  --resume-rule-width:    1px;
  --resume-photo-size:    84px;
  --resume-photo-radius:  var(--radius-sm);
}

/* =========================================================================
   Site theme overrides — dark mode
   Activated via [data-site-theme="dark"] on <html>.
   The resume document itself stays light (paper is paper), so the resume
   tokens are NOT overridden here.
   ========================================================================= */
[data-site-theme='dark'] {
  --text-primary:   #eef2fb;
  --text-secondary: #b6bfd6;
  --text-tertiary:  #7d87a3;
  --text-inverse:   var(--ink-950);
  --text-brand:     var(--brand-400);
  --text-on-brand:  var(--ink-950);

  --bg-page:        #0a0f1c;
  --bg-surface:     #0f1524;
  --bg-surface-alt: #131a2c;
  --bg-surface-sunk:#080c17;
  --bg-brand:       var(--brand-500);
  --bg-brand-soft:  rgba(245, 197, 24, 0.12);
  --bg-inverse:     #eef2fb;
  --bg-overlay:     rgba(0, 0, 0, 0.65);

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default:rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.2);
  --border-brand:  var(--brand-500);
  --border-inverse:rgba(11, 18, 32, 0.14);

  --surface-0: #0f1524;
  --surface-1: #0a0f1c;
  --surface-2: #131a2c;
  --surface-3: #182034;
  --surface-4: #1f2941;

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md:  0 4px 10px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 10px 24px rgba(0, 0, 0, 0.55);
  --shadow-xl:  0 20px 40px rgba(0, 0, 0, 0.6);
  --shadow-2xl: 0 32px 64px rgba(0, 0, 0, 0.65);
}

/* =========================================================================
   Reduced motion — never override the user's system preference
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast:    0ms;
    --duration-base:    0ms;
    --duration-slow:    0ms;
    --duration-slower:  0ms;
  }
}

/* =========================================================================
   High contrast preference
   ========================================================================= */
@media (prefers-contrast: more) {
  :root {
    --border-subtle: var(--ink-300);
    --border-default: var(--ink-400);
    --border-strong: var(--ink-600);
    --text-secondary: var(--ink-800);
    --text-tertiary: var(--ink-600);
  }
}