/* ==========================================================================
   Portfolio — Design Tokens (AI case)
   Source of truth: case-ai.html inline :root (extracted 1:1, no visual change).
   Semantic naming so it can later be reused across other pages.
   ========================================================================== */
:root {
  /* --- Typography --------------------------------------------------------- */
  --font-display: "Space Grotesk", "Outfit", sans-serif;
  --font-body: "Outfit", "Space Grotesk", sans-serif;

  /* --- Primitive color ramps --------------------------------------------- */
  /* Neutral ramp (light -> darkest) */
  --color-neutral-0: #ffffff;
  --color-neutral-100: #f7f8fb;
  --color-neutral-200: #edeff7;
  --color-neutral-300: #dee2f0;
  --color-neutral-400: #c8cde0;
  --color-neutral-500: #a3a9c4;
  --color-neutral-600: #7b809f;
  --color-neutral-700: #555971;
  --color-neutral-800: #2f3248;
  --color-neutral-900: #181b2f;
  --color-neutral-950: #121528;
  --color-neutral-1000: #050718;

  /* Purple ramp (primary accent) */
  --color-purple-100: #f5f2ff;
  --color-purple-200: #e4dcff;
  --color-purple-300: #ccbfff;
  --color-purple-400: #b19dff;
  --color-purple-500: #947cff;
  --color-purple-600: #6a5af9;
  --color-purple-700: #4f3fda;
  --color-purple-800: #3628b0;
  --color-purple-900: #241a82;
  --color-purple-1000: #171053;

  /* Orange ramp (warm accent) */
  --color-orange-100: #fff4ec;
  --color-orange-200: #ffe0d1;
  --color-orange-300: #ffc4aa;
  --color-orange-400: #ffa278;
  --color-orange-500: #ff8757;
  --color-orange-600: #ff6c3e;
  --color-orange-700: #e35329;
  --color-orange-800: #b83c1d;
  --color-orange-900: #7a2913;
  --color-orange-1000: #3f1608;

  /* Cool ramp (support accents / washes) */
  --color-cool-100: #f0f6ff;
  --color-cool-200: #dfeaff;
  --color-cool-300: #c5d6ff;
  --color-cool-400: #a3bcff;
  --color-cool-500: #82a2ff;
  --color-cool-600: #5d82ff;
  --color-cool-700: #3b64e0;
  --color-cool-800: #2745b3;
  --color-cool-900: #182d7d;
  --color-cool-1000: #0e1a4b;

  /* --- Semantic aliases --------------------------------------------------- */
  /* Text */
  --color-text-primary: var(--color-neutral-950);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-muted: var(--color-neutral-500);
  --color-text-inverse: var(--color-neutral-0);
  --color-text-inverse-muted: rgba(237, 239, 247, 0.72);

  /* Surfaces */
  --color-surface-default: var(--color-neutral-0);
  --color-surface-muted: var(--color-neutral-100);
  --color-surface-raised: var(--color-neutral-0);
  --color-surface-frosted: rgba(255, 255, 255, 0.85);
  --color-surface-inverse: var(--color-neutral-1000);

  /* Sections */
  --color-section-default: var(--color-surface-default);
  --color-section-muted: var(--color-neutral-100);
  --color-section-tinted-cool: var(--color-purple-100);
  --color-section-tinted-warm: var(--color-orange-100);
  --color-section-strong: var(--color-neutral-1000);
  --color-section-conclusion: linear-gradient(140deg, var(--color-purple-100), var(--color-orange-100));

  /* Accents */
  --color-accent-primary: var(--color-purple-600);
  --color-accent-primary-soft: var(--color-purple-100);
  --color-accent-primary-strong: var(--color-purple-800);
  --color-accent-warm: var(--color-orange-600);
  --color-accent-warm-soft: var(--color-orange-100);
  --color-accent-cool: var(--color-cool-600);
  --color-accent-cool-soft: var(--color-cool-100);

  /* Borders */
  --color-border-subtle: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);
  --color-border-on-dark: rgba(255, 255, 255, 0.18);
  --color-border-accent-soft: rgba(106, 90, 249, 0.35);

  /* Gradients / page backgrounds */
  --gradient-page: linear-gradient(180deg, var(--color-neutral-100) 0%, var(--color-neutral-0) 65%);

  /* --- Legacy compatibility aliases -------------------------------------- */
  --color-bg-surface: var(--color-surface-default);
  --color-bg-muted: var(--color-section-muted);
  --color-bg-dark: var(--color-section-strong);
  --color-surface-frosted-legacy: var(--color-surface-frosted);

  /* --- Radius (primitive) ------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;  /* was --card-radius */
  --radius-xl: 32px;  /* was --card-radius-lg */

  /* Radius (semantic) */
  --radius-card: var(--radius-lg);
  --radius-panel: var(--radius-xl);

  /* --- Shadows (primitive) ------------------------------------------------ */
  --shadow-floating: 0 30px 70px rgba(15, 20, 38, 0.14); /* was --card-shadow */
  --shadow-panel: 0 25px 65px rgba(3, 2, 8, 0.6);        /* process-card panel */
  --shadow-soft: 0 10px 24px rgba(18, 21, 40, 0.08);     /* feature-icon / cards */

  /* Shadows (semantic) */
  --shadow-card: var(--shadow-soft);
  --shadow-panel-raised: var(--shadow-floating);

  /* --- Typography (primitive scale) -------------------------------------- */
  --type-scale-2xl: clamp(2.8rem, 6vw, 4.6rem);
  --type-scale-xl: clamp(2.3rem, 5vw, 3.8rem);
  --type-scale-lg: clamp(2.15rem, 3vw, 3rem);
  --type-scale-md: clamp(1.2rem, 1.5vw, 1.6rem);
  --type-scale-base: 1rem;
  --type-scale-sm: 0.9rem;
  --type-scale-xs: 0.72rem;

  /* Typography (semantic roles) */
  --type-hero-size: var(--type-scale-2xl);
  --type-hero-line-height: 1.05;
  --type-section-title-size: var(--type-scale-lg);
  --type-section-title-line-height: 1.15;
  --type-subsection-title-size: var(--type-scale-md);
  --type-body-size: var(--type-scale-base);
  --type-body-line-height: 1.6;
  --type-small-size: var(--type-scale-sm);
  --type-small-line-height: 1.5;
  --type-eyebrow-size: var(--type-scale-xs);
  --type-eyebrow-letter-spacing: 0.4em;
  --type-button-size: var(--type-scale-base);

  /* --- Layout / containers ------------------------------------------------ */
  --container-narrow: 720px;
  --container-content: 1100px;
  --container-wide: 1200px;
  --container-showcase: 1320px;
  --container-gutter: 24px;

  --grid-gap: clamp(16px, 3vw, 32px);
  --card-min-width: 240px;

  /* --- Spacing (primitive scale) ------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --section-padding-y: clamp(72px, 9vw, 120px); /* was --section-space */
  --topbar-overlap: 72px;                        /* preserved as-is */
  --topbar-height: var(--topbar-overlap);        /* matches sticky top bar */

  /* --- Hero system -------------------------------------------------------- */
  --hero-height: clamp(520px, 62vh, 720px);
  --hero-overlay-gradient:
    linear-gradient(125deg, rgba(5, 6, 18, 0.88), rgba(17, 10, 32, 0.55)),
    linear-gradient(0deg, rgba(33, 18, 82, 0.45), rgba(10, 6, 20, 0.6)),
    radial-gradient(circle at 12% 18%, rgba(115, 94, 255, 0.5), transparent 52%),
    radial-gradient(circle at 78% 65%, rgba(255, 149, 109, 0.4), transparent 55%);
  --hero-overlay-opacity: 0.9;
  --hero-background-position: center right;

  /* Spacing (semantic roles) */
  --space-section-y: var(--section-padding-y);
  --space-section-header: var(--space-5);
  --space-section-content: var(--space-7);
  --space-card-padding: var(--space-5);
  --space-grid-gap: var(--grid-gap);
  --space-button-x: 30px;
  --space-button-y: 14px;
  --space-stack-sm: var(--space-2);
  --space-stack-md: var(--space-4);
  --space-stack-lg: var(--space-6);
}

@media (max-width: 1024px) {
  :root {
    --hero-height: clamp(440px, 56vh, 600px);
  }
}

@media (max-width: 640px) {
  :root {
    --hero-height: clamp(380px, 52vh, 520px);
  }
}

@media (max-width: 900px) {
  :root {
    --hero-background-position: center;
  }
}