/* ============================================================
   DESIGN TOKENS
   Osama Ali — Interactive Career Story
   ============================================================ */

:root {

  /* ── Colors ────────────────────────────────────────────── */
  --c-bg:        #FAF9F6;   /* warm ivory paper */
  --c-bg-alt:    #F3F1EC;   /* slightly deeper warm paper */
  --c-dark:      #0C0C0B;   /* near-black obsidian */
  --c-dark-alt:  #141413;   /* slightly lighter dark */
  --c-ink:       #121211;   /* primary text (ultra-high contrast) */
  --c-ink-mid:   #3D3B38;   /* secondary text (WCAG AAA compliant) */
  --c-ink-muted: #5C5955;   /* tertiary / caption text (WCAG AA compliant 5.8:1) */
  --c-rule:      #DBD8D0;   /* borders, dividers */
  --c-rule-dark: #262624;   /* borders on dark backgrounds */
  --c-accent:    #D94F2C;   /* editorial warm terracotta/vermilion */
  --c-accent-rgb: 217, 79, 44;
  --c-accent-light: #E86544;
  --c-accent-glow: rgba(217, 79, 44, 0.25);
  --c-accent-bg: rgba(217, 79, 44, 0.08);
  --c-white:     #FFFFFF;
  --c-light-text:#F6F5F2;   /* primary text on dark */
  --c-light-mid: #CCC9C2;   /* secondary text on dark */
  --c-light-muted:#A8A59E;  /* tertiary text on dark (WCAG AA compliant 6.2:1) */

  /* ── Notebook Grid System ─────────────────────────────── */
  --grid-paper-light:  #FAF9F6;
  --grid-paper-dark:   #0C0C0B;
  --grid-line-blue:    rgba(55, 90, 135, 0.07);
  --grid-margin-red:   rgba(220, 60, 50, 0.2);
  --grid-line-dark:    rgba(255, 255, 255, 0.04);
  --grid-margin-dark:  rgba(217, 79, 44, 0.16);
  --grid-size:         120px;

  /* ── Typography Families ──────────────────────────────── */
  --font-sans:    'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-hand:    'Caveat', 'Architects Daughter', cursive;
  --font-serif:   'Playfair Display', Georgia, 'Times New Roman', serif;

  /* ── Type Scale (Calibrated for strict 100vh containment) ─ */
  --text-2xs:   0.625rem;   /* 10px */
  --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:   4rem;       /* 64px */
  --text-hero:    clamp(2.2rem, 5vw, 4.5rem);
  --text-display: clamp(1.35rem, 2.5vw, 2.25rem);
  --text-title:   clamp(1.1rem, 1.8vw, 1.6rem);
  --text-body-l:  clamp(0.875rem, 1vw, 1rem);

  /* ── Font Weights ─────────────────────────────────────── */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* ── Line Heights ─────────────────────────────────────── */
  --lh-tight:  1.1;
  --lh-snug:   1.2;
  --lh-normal: 1.45;
  --lh-loose:  1.6;

  /* ── Letter Spacing ───────────────────────────────────── */
  --ls-tight:  -0.03em;
  --ls-normal: -0.01em;
  --ls-wide:   0.08em;
  --ls-wider:  0.15em;

  /* ── Spacing Scale (Viewport Proportional for Slides) ─── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   clamp(0.75rem, 1.5vh, 1rem);
  --space-5:   clamp(0.85rem, 1.8vh, 1.25rem);
  --space-6:   clamp(1rem, 2vh, 1.5rem);
  --space-8:   clamp(1.15rem, 2.4vh, 1.75rem);
  --space-10:  clamp(1.25rem, 2.8vh, 2rem);
  --space-12:  clamp(1.5rem, 3.2vh, 2.25rem);
  --space-16:  clamp(1.75rem, 3.8vh, 2.75rem);
  --space-20:  clamp(2rem, 4.5vh, 3.25rem);
  --space-24:  clamp(2.25rem, 5vh, 3.75rem);
  --space-32:  clamp(2.5rem, 6vh, 4.5rem);
  --space-40:  clamp(3rem, 7vh, 5.5rem);

  /* ── Layout ───────────────────────────────────────────── */
  --max-w:     1440px;
  --max-w-wide: 1600px;
  --max-w-content: 1240px;
  --max-w-narrow: 760px;
  --scene-px:  clamp(1.5rem, 4vw, 4rem);
  --scene-py:  clamp(1.25rem, 3.2vh, 2.5rem);
  --nav-w:     64px;

  /* ── Transitions & Easing ─────────────────────────────── */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout:    cubic-bezier(0.87, 0, 0.13, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-instant:   80ms;
  --dur-fast:      200ms;
  --dur-base:      400ms;
  --dur-slow:      700ms;
  --dur-xslow:     1100ms;

  /* ── Borders & Radius ─────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --border-width: 1px;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.10);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);

  /* ── Glassmorphism & Ambient Glow ────────────────────── */
  --glass-bg-dark:       rgba(18, 18, 17, 0.78);
  --glass-bg-light:      rgba(255, 255, 255, 0.88);
  --glass-border-dark:   rgba(255, 255, 255, 0.09);
  --glass-border-light:  rgba(0, 0, 0, 0.07);
  --glass-blur:          14px;
  --glow-accent:         rgba(217, 79, 44, 0.12);
  --glow-amber:          rgba(255, 170, 0, 0.05);
  --glow-cyan:           rgba(0, 200, 255, 0.05);

  /* ── Device Mockup Tokens ──────────────────────────────── */
  --mockup-radius:       26px;
  --mockup-bezel:        5px;
  --mockup-shadow:       0 18px 40px -8px rgba(0,0,0,0.28), 0 0 0 1px rgba(0,0,0,0.14);

  /* ── Z-index layers ───────────────────────────────────── */
  --z-grain:    1;
  --z-glow:     2;
  --z-scene:    10;
  --z-nav:      100;
  --z-modal:    200;
  --z-progress: 210;
}

@media (max-width: 768px) {
  :root {
    --grid-size: 70px;
  }
}