/* =====================================================
   CSS CUSTOM PROPERTIES — Design Tokens
   Source: Figma — Portfolio-2026 / node 36:155
   ===================================================== */

:root {

  /* ── Colors ─────────────────────────────────────── */
  --color-bg:           #151516;   /* page background */
  --color-bg-black:     #000000;   /* selected works section */
  --color-surface:      #1c1c1d;   /* elevated surface */
  --color-border:       #474747;   /* card borders */
  --color-border-light: rgba(255,255,255,0.12);

  /* Text */
  --color-text:         #dddddd;   /* primary text */
  --color-text-muted:   #8d8c8f;   /* secondary / muted text */
  --color-text-project: #a4a4a4;   /* project card subtitles */
  --color-text-dark:    #151516;   /* text on light cards */
  --color-white:        #ffffff;

  /* Accent */
  --color-accent:       #b8ebc7;   /* nav active indicator */

  /* Category card backgrounds */
  --color-card-yellow:  #ecff8e;   /* e-commerce */
  --color-card-mint:    #9febcd;   /* dashboards */
  --color-card-black:   #000000;   /* motion / visual */
  --color-card-white:   rgba(255, 255, 255, 0.96);  /* design system */

  /* Project card accent backgrounds */
  --color-project-purple: #7f7dc1;
  --color-project-green:  #79b58a;
  --color-project-red:    #db8787;


  /* ── Typography ─────────────────────────────────── */
  --font-primary:   'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-secondary: 'Inter', system-ui, -apple-system, sans-serif;

  /* Font weights */
  --fw-extralight:  200;
  --fw-light:       300;
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-extrabold:   800;

  /* Font sizes — desktop base */
  --fs-hero:         clamp(56px, 9vw, 128px);
  --fs-showreel:     clamp(36px, 5.5vw, 64px);
  --fs-works-title:  clamp(32px, 4vw, 56px);
  --fs-card-lg:      clamp(26px, 3vw, 40px);
  --fs-card-sm:      clamp(18px, 2vw, 24px);
  --fs-stat-value:   clamp(20px, 2.5vw, 32px);
  --fs-stat-label:   clamp(14px, 1.6vw, 24px);
  --fs-body:         clamp(16px, 1.8vw, 24px);
  --fs-project-title: clamp(22px, 2.5vw, 32px);
  --fs-project-meta:  clamp(18px, 2vw, 24px);
  --fs-chip:         clamp(20px, 1.8vw, 24px);
  --fs-tag:          14px;
  --fs-label:        clamp(14px, 1.2vw, 16px);
  --fs-expertise:    clamp(28px, 3vw, 40px);

  /* Line heights */
  --lh-hero:    1.03;
  --lh-body:    1.67;  /* 40/24 */
  --lh-display: 1.125;

  /* Letter spacing */
  --ls-wide:    0.04em;
  --ls-wider:   0.08em;


  /* ── Spacing ─────────────────────────────────────── */
  --sp-2:    2px;
  --sp-4:    4px;
  --sp-6:    6px;
  --sp-8:    8px;
  --sp-10:   10px;
  --sp-12:   12px;
  --sp-16:   16px;
  --sp-20:   20px;
  --sp-24:   24px;
  --sp-32:   32px;
  --sp-40:   40px;
  --sp-48:   48px;
  --sp-64:   64px;
  --sp-80:   80px;
  --sp-120:  120px;

  /* Layout */
  --nav-height:        102px;
  --container-max:     1440px;
  --container-pad:     120px;
  --content-width:     1200px;
  --card-gap:          20px;

  /* Category card heights */
  --card-row1-h:       450px;
  --card-row2-h:       400px;

  /* Project card heights */
  --project-h-horiz:   400px;
  --project-h-vert:    651px;
  --project-media-vert: 387px;


  /* ── Radii ────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-card: 32px;   /* category cards */
  --radius-pill: 50px;
  --radius-chip: 50px;
  --radius-tag:  50px;


  /* ── Shadows ─────────────────────────────────────── */
  --shadow-card:      0 2px 24px rgba(0,0,0,0.25);
  --shadow-hover:     0 8px 48px rgba(0,0,0,0.45);
  --shadow-modal:     0 32px 96px rgba(0,0,0,0.8);


  /* ── Transitions & Easing ───────────────────────── */
  --ease:         cubic-bezier(.22,.61,.36,1);
  --ease-in:      cubic-bezier(.4,0,1,1);
  --ease-out:     cubic-bezier(0,0,.4,1);
  --ease-spring:  cubic-bezier(.34,1.56,.64,1);

  --dur-fast:     250ms;
  --dur-normal:   350ms;
  --dur-slow:     600ms;
  --dur-reveal:   700ms;


  /* ── Z-index scale ───────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-modal:   1000;
  --z-toast:   2000;
}