/*
  Design tokens for the Fes Naqvi portfolio site.
  Consumed directly by ../styles.css. This is the single source of
  truth — edit values here, not in the files that consume them.

  THEMES: the site runs on the LIGHT theme by default (:root below).
  Midnight Signal is available as a preview-only theme layer on the design
  system reference page. The original dark token set is preserved under
  [data-theme="dark"] as an additional saved option. The printable resume
  keeps its own inline light palette.
  ../resume.html keeps its own self-contained light palette inline
  (needs to look right when printed, independent of site theme/JS).
*/

:root {
  /* ---------- Color / surface (light theme — default) ---------- */
  --color-bg-canvas: #f1f0fa;       /* page background — light lavender tint */
  --color-bg-raised: #e8e7f4;       /* hover states, inputs, elevated chrome, and carousel panel fill */
  --color-bg-surface: #ffffff;      /* card / panel fill */
  --color-bg-module-indigo: #ddddf4; /* connected About principle tints */
  --color-bg-module-teal: #dae4ec;
  --color-bg-module-gold: #e8e4e4;

  --color-border-default: #7f838f;  /* panel boundaries, including the carousel; at least 3.09:1 across canvas, raised, and white surfaces */
  --color-border-focus: var(--color-focus-ring); /* compact carousel focus outlines */
  --color-border-chrome: rgba(0, 0, 0, 0.12); /* nav and translucent chrome */
  --color-border-accent: rgba(74, 79, 196, 0.25);
  --color-border-accent-subtle: rgba(74, 79, 196, 0.2); /* soft carousel and tag boundaries */

  --color-text-primary: #1a1c22;         /* primary copy and active carousel-thumbnail border */
  --color-text-secondary: #5c6270;
  --color-text-tertiary: #646870;        /* at least 4.5:1 across canvas, raised, and white surfaces */
  --color-text-hero: #3f444f;            /* hero paragraph over the photographic background */
  --color-text-on-dark: #ffffff;
  --color-text-on-image: rgba(255, 255, 255, 0.85);

  --color-accent-primary: #4a4fc4;       /* indigo — links, focus, primary accent (darkened from the dark-theme #6e7cf6 for AA contrast on white) */
  --color-accent-primary-tint: rgba(74, 79, 196, 0.1);
  --color-accent-secondary: #0c7a70;     /* teal — 4.61:1 on canvas / 5.21:1 on white */
  --color-accent-tertiary: #876900;      /* gold — 4.59:1 on canvas / 5.18:1 on white */
  --color-accent-warm: #e0955c;          /* decorative warm accent; never used for small text */
  --color-focus-ring: #4a4fc4;
  --color-error: #b42318;                /* 5.82:1 on canvas / 6.57:1 on white */

  --color-control-high-bg: #1a1c22;
  --color-control-high-text: #ffffff;
  --color-control-low-bg: rgba(255, 255, 255, 0.5);
  --color-control-low-hover-bg: #ffffff;
  --color-control-low-hover-border: #3d4dff;
  --color-image-chip-bg: rgba(0, 0, 0, 0.72);

  --color-overlay-scrim: rgba(17, 17, 20, 0.45);   /* modal backdrop */
  --color-nav-scrim: rgba(255, 255, 255, 0.82);    /* sticky nav / footer / drawer backdrop — the drawer shares this box directly rather than layering its own */
  --color-hero-stats-scrim: color-mix(in srgb, var(--color-bg-canvas) 25%, transparent);

  --color-brand-mark: #38445b;   /* header logo SVG fill — light theme only, deliberately its own token rather than reusing --color-text-primary so it can hold a fixed navy regardless of future text-color changes */

  /* ---------- Decorative gradients ---------- */
  --gradient-hero-fallback: linear-gradient(110deg, #c8cbf4 0%, #d8dbf8 30%, #e4e5f8 60%, #eeedf9 100%);
  --gradient-contact-section: linear-gradient(
    135deg,
    var(--color-bg-canvas),
    color-mix(in srgb, var(--color-bg-canvas) 92%, var(--color-accent-warm) 8%)
  );
  --gradient-contact-panel: radial-gradient(ellipse at 100% 0%, rgba(74, 79, 196, 0.45) 0%, transparent 48%),
    radial-gradient(ellipse at 0% 100%, rgba(12, 122, 112, 0.4) 0%, transparent 48%),
    radial-gradient(ellipse at 55% 110%, rgba(135, 105, 0, 0.35) 0%, transparent 45%);
  --gradient-case-hero-scrim: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.56) 42%,
    rgba(0, 0, 0, 0) 76%
  );

  /* ---------- Typography ---------- */
  --font-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; /* UI/system face: nav, buttons, tags, form fields */
  --font-editorial: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; /* content face: display, heading-lg, heading-sm, body-lg, body */
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, Menlo, monospace;

  --text-display: clamp(36px, 5vw, 58px); /* hero H1 — font: --font-editorial */
  --text-heading-lg: 30px;                /* section H2, panel H2 (collapsed from a near-duplicate 28px) — font: --font-editorial */
  --text-heading-sm: 18px;                /* card / row H3 — font: --font-editorial */
  --text-body-lg: 18px;                   /* hero paragraph, case lede — font: --font-editorial */
  --text-body: 15px;                      /* default paragraph — font: --font-editorial */
  --text-body-sm: 14px;                   /* secondary paragraph, buttons — stays --font-sans (UI face) */
  --text-caption: 13px;                   /* meta text — stays --font-sans (UI face) */
  --text-label: 11px;                     /* mono uppercase labels — stays --font-mono */

  --leading-tight: 1.08;
  --leading-normal: 1.5;
  --leading-compact: 1.0;

  --tracking-tight: -0.02em;   /* headings */
  --tracking-tighter: -0.03em; /* display */
  --tracking-wide: 0.06em;     /* uppercase mono labels */

  /* ---------- Radius ---------- */
  --radius-lg: 12px;   /* panels, grids, and modal-scale surfaces */
  --radius-case-study: 12px; /* case-study cards and modal media */
  --radius-action: 12px; /* primary and secondary action buttons */
  --radius-md: 12px;   /* nav toggle, inputs, small blocks */
  --radius-sm: 6px;    /* compact thumbnail and preview surfaces */
  --radius-pill: 100px; /* badges, tags, eyebrow */
  --radius-circle: 50%; /* icon buttons (close, prev/next) */

  /* ---------- Spacing (4px base unit) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 56px;
  --space-12: 64px;
  --space-14: 88px;
  --space-16: 96px;
  --space-18: 108px;

  /* ---------- Elevation / motion ---------- */
  --shadow-card-hover: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
  --shadow-h1: 0 2px 8px rgba(0, 0, 0, 0.08); /* subtle on light — a dark-mode-strength glow would just look like a smudge behind now-dark text */
  --shadow-modal-title: 0 0 10px rgba(0, 0, 0, 0.45);

  --duration-fast: 150ms;        /* nav links, icon nudges — sharpest interactive response */
  --duration-interactive: 200ms; /* nav underline and case-study crossfade */
  --duration-base: 220ms;        /* buttons, most UI state changes */
  --duration-slow: 280ms;        /* nav drawer, back-to-top, larger layout transitions */
  --duration-page: 345ms;        /* same-origin page crossfade */
  --duration-modal-overlay: 110ms;
  --duration-modal-shell: 140ms; /* longest modal close duration; mirrored by script.js */
  --duration-hero: 900ms;        /* hero and modal-hero image crossfade */
  --duration-image: 1s;          /* case study image loading fade */
  --duration-reveal: 1s;         /* scroll-reveal opacity fade-in */
  --stagger-reveal: 60ms;        /* successive scroll-reveal entries; read by script.js */
  --stagger-reveal-initial: 75ms; /* initially visible resume sections; read by script.js */
  --ease-standard: ease;
  --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---------- Layout ---------- */
  --content-max-width: 1120px;
  --content-measure: 720px; /* reading measure for hero ledes and resume summaries */
  --content-min-width: 320px;
  --nav-height: 68px;
  --content-gutter-fluid: clamp(20px, 3vw, 32px);
  --space-nav-y-fluid: clamp(12px, 1.8vw, 18px);
  --space-hero-fluid: clamp(32px, 5vw, 60px);
  --space-section-fluid: clamp(48px, 7vw, 96px);
  --space-grid-fluid: clamp(16px, 2.2vw, 24px);
  --space-timeline-gap-fluid: clamp(16px, 2.5vw, 28px);
  --space-panel-fluid: clamp(28px, 5vw, 56px);
  --space-panel-gap-fluid: clamp(24px, 4vw, 48px);
  --space-contact-columns: var(--space-11); /* intentional desktop Contact gutter */
  --space-contact-details-gap: var(--space-2); /* Contact detail list rhythm */
}

[data-theme="dark"] {
  /* ---------- Color / surface (original dark theme — saved option) ---------- */
  --color-bg-canvas: #0b0c0f;
  --color-bg-raised: #131519;
  --color-bg-surface: #16181d;
  --color-bg-module-indigo: color-mix(in srgb, var(--color-bg-surface) 86%, var(--color-accent-primary) 14%);
  --color-bg-module-teal: color-mix(in srgb, var(--color-bg-surface) 86%, var(--color-accent-secondary) 14%);
  --color-bg-module-gold: color-mix(in srgb, var(--color-bg-surface) 88%, var(--color-accent-tertiary) 12%);

  --color-border-default: #626874;        /* at least 3.17:1 across dark surfaces */
  --color-border-chrome: rgba(255, 255, 255, 0.14);
  --color-border-accent: rgba(110, 124, 246, 0.32);
  --color-border-accent-subtle: rgba(110, 124, 246, 0.24);

  --color-text-primary: #eef0f3;
  --color-text-secondary: #9aa0ab;
  --color-text-tertiary: #858c99;        /* 5.78:1 on canvas / 5.25:1 on surface */
  --color-text-hero: #c9cdd5;
  --color-text-on-dark: #ffffff;
  --color-text-on-image: rgba(255, 255, 255, 0.85);

  --color-accent-primary: #6e7cf6;
  --color-accent-primary-tint: rgba(110, 124, 246, 0.14);
  --color-accent-secondary: #4fd1c5;
  --color-accent-tertiary: #ffd60a;
  --color-focus-ring: #ffd60a;
  --color-error: #ff8a80;

  --color-control-high-bg: #eef0f3;
  --color-control-high-text: #0b0c0f;
  --color-control-low-bg: rgba(22, 24, 29, 0.5);
  --color-control-low-hover-bg: #16181d;
  --color-control-low-hover-border: #6e7cf6;
  --color-image-chip-bg: rgba(0, 0, 0, 0.72);

  --color-overlay-scrim: rgba(6, 7, 9, 0.7);
  --color-nav-scrim: rgba(11, 12, 15, 0.82);
  --color-hero-stats-scrim: color-mix(in srgb, var(--color-bg-canvas) 35%, transparent);

  --color-brand-mark: var(--color-text-primary); /* unchanged dark-theme behavior — the fixed navy is a light-theme-only choice */

  --gradient-hero-fallback: linear-gradient(110deg, #171a35 0%, #202644 36%, #202d3b 68%, #252329 100%);
  --gradient-contact-panel: radial-gradient(ellipse at 100% 0%, rgba(110, 124, 246, 0.28) 0%, transparent 48%),
    radial-gradient(ellipse at 0% 100%, rgba(79, 209, 197, 0.22) 0%, transparent 48%),
    radial-gradient(ellipse at 55% 110%, rgba(255, 214, 10, 0.16) 0%, transparent 45%);

  --shadow-h1: 0 4px 16px rgba(0, 0, 0, 0.45); /* stronger glow behind now-bright text */
}