/*
 * tokens.css — single source of truth for the Portfolio design system.
 *
 * Layered architecture:
 *   1. Primitive — raw values (colors, sizes, weights). Do not use in components directly.
 *   2. Semantic  — intent-based (color-text-primary, space-page-padding, type-display-xl-*).
 *   3. Component — local tokens for specific components (card-*, tag-*, hero-*, footer-*).
 *
 * Figma mapping:
 *   - Colors → --color-* semantic tokens.
 *   - Sizes → --space-*, --radius-*, --stroke-*, --icon-*, --grid-* tokens.
 *   - Typography + text styles → --font-*, --line-height-*, --tracking-*, --type-* tokens.
 *
 * Production-only tokens live in the Component section when they describe browser
 * behavior, layout geometry, layering, or implementation workarounds not modeled
 * as Figma variables.
 *
 * Breakpoints override typography and spacing at `max-width: 767px` (mobile) and
 * `max-width: 1023px` (tablet) per docs/figma-audit/layout-rules.md.
 *
 * Source: Figma "Starting Point" (fileKey: OrSenMzG1cZgmJzjvi7ikP)
 * Figma inventory: Colors Primitive 289, Colors 23, Sizes 24, Typography 23.
 * Updated: 2026-05-03
 * Licensing shortlist: docs/typography-fonts-to-purchase.md
 */

:root {
  /* ============================================================
   * 1. PRIMITIVE
   * ============================================================ */

  /* 1.1 Colors — neutrals */
  --color-black: #000000;
  --color-white: #ffffff;

  /* 1.2 Colors — olive */
  --color-olive-400: #abab9c;

  /* 1.3 Colors — teal */
  --color-teal-950: #022f2e;

  /* 1.4 Colors — orange */
  --color-orange-500: #ff6900;
  --color-orange-900: #7e2a0c;

  /* 1.5 Colors — rose */
  --color-rose-900: #8b0836;

  /* 1.6 Colors — blue */
  --color-blue-900: #1c398e;

  /* 1.7 Colors — Figma semantic raw values */
  --color-tag-muted-raw: #767676; /* Figma Colors: tag/muted, text/muted */
  --color-card-dim-raw: #696773; /* Figma Colors: card/dim */
  --color-footer-glow-raw: #7a7a74; /* Figma Colors: footer/glow */

  /* 1.8 Colors — section accents (all currently hardcoded on Home) */
  --color-hero-blue-50: #cbf7ff;
  --color-hero-glow: #81baff;
  --color-hero-rose-50: #ffdfed; /* Index hero surface */
  --color-hero-glow-rose: #fdb4df; /* Index hero glow */
  --color-hero-yellow-50: #fff2b2; /* About hero surface */
  --color-hero-glow-yellow: #e7bd68; /* About hero glow */
  --color-accent-red: #b70025;
  --color-accent-iris: #454add;
  --color-accent-seafoam: #93e2ee;
  --color-accent-pink: #fdb4df;
  --color-accent-lemon: #fff36e;

  /* 1.9 Colors — surfaces */
  --color-surface-featured-raw: #f2f4f7;
  --color-surface-cream-raw: #fcf9ef;
  --color-surface-bark-raw: #652316;
  --color-surface-taupe-raw: #968978;

  /* 1.10 Color — semi-transparent production values */

  /* Figma tag/overlay is #00000000; 0.1% alpha preserves backdrop rendering in header/tag glass. */
  --color-tag-overlay: rgba(0, 0, 0, 0.001);
  --color-overlay-fallback: rgba(0, 0, 0, 0.44);

  /* 2. Typography — families */
  --font-family-sans: "American Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-family-serif: "Society", "Georgia", "Times New Roman", serif;

  /* 2.1 Typography — weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* 2.2 Typography — sizes */
  --font-size-16: 1rem; /* 16px */
  --font-size-18: 1.125rem; /* 18px — mobile body */
  --font-size-20: 1.25rem; /* 20px — desktop body */
  --font-size-24: 1.5rem; /* 24px — mobile heading-lg */
  --font-size-28: 1.75rem; /* 28px */
  --font-size-32: 2rem; /* 32px */
  --font-size-36: 2.25rem; /* 36px */
  --font-size-42: 2.625rem; /* 42px — Figma text-size/2-xl mobile variable */
  --font-size-48: 3rem; /* 48px — primitive scale */
  --font-size-56: 3.5rem; /* 56px */
  --font-size-72: 4.5rem; /* 72px */

  /* 2.3 Typography — line-heights */
  --line-height-22: 1.375rem;
  --line-height-26: 1.625rem;
  --line-height-28: 1.75rem;
  --line-height-30: 1.875rem;
  --line-height-32: 2rem;
  --line-height-40: 2.5rem;
  --line-height-42: 2.625rem;
  --line-height-48: 3rem;
  --line-height-56: 3.5rem;
  --line-height-68: 4.25rem;
  --line-height-80: 5rem;

  /* 2.4 Typography — tracking */
  --tracking-tight: -0.01px;
  --tracking-normal: 0;
  --tracking-wider: 0.5px;
  --tracking-caps: 0.25em; /* "caps/16" in Figma = 4px on 16px ≈ 0.25em */

  /* 3. Spacing — 4-based scale */
  --space-150: 6px;
  --space-200: 8px;
  --space-300: 12px;
  --space-400: 16px;
  --space-600: 24px;
  --space-800: 32px;
  --space-1200: 48px;
  --space-1600: 64px;
  --space-2400: 96px;
  --space-4000: 160px;

  /* 4. Radii */
  --radius-xs: 2px;
  --radius-sm: 4px; /* current Figma radius/100 */
  --radius-lg: 12px;
  --radius-200: 8px; /* Figma radius/200; keep semantic aliases component-side if needed */
  --radius-400: 16px; /* Figma radius/400 */
  --radius-full: 9999px; /* Figma radius/full */

  /* 4.1 Stroke widths */
  --stroke-border: 1px;
  --stroke-focus-ring: 2px;

  /* 4.2 Icon sizes */
  --icon-size-sm: 24px;
  --icon-size-md: 32px;
  --icon-size-lg: 40px;

  /* 5. Breakpoints (informational; use in @media queries) */
  --bp-sm: 480px;
  --bp-md: 767px;
  --bp-lg: 1023px;
  --bp-xl: 1280px;
  --bp-2xl: 1512px;

  /* ============================================================
   * 2. SEMANTIC
   * ============================================================ */

  /* 2.1 Text colors */
  --color-text-primary: var(--color-black);
  --color-text-inverse: var(--color-white);
  --color-text-muted: var(--color-tag-muted-raw);
  --color-text-olive: var(--color-olive-400);
  --color-text-brand-blue: var(--color-blue-900);
  --color-text-accent-red: var(--color-accent-red);
  --color-text-accent-iris: var(--color-accent-iris);
  --color-text-accent-seafoam: var(--color-accent-seafoam);
  --color-text-accent-lemon: var(--color-accent-lemon);
  --color-focus: var(--color-blue-900);

  /* 2.2 Surfaces (backgrounds) */
  --color-surface-page: var(--color-white);
  --color-surface-hero: var(--color-hero-blue-50);
  --color-surface-hero-index: var(--color-hero-rose-50);
  --color-surface-hero-about: var(--color-hero-yellow-50);
  --color-surface-featured: var(--color-surface-featured-raw);
  --color-surface-made-by-mad: var(--color-surface-cream-raw);
  --color-surface-odds-ends: var(--color-surface-bark-raw);
  --color-surface-in-curves: var(--color-surface-taupe-raw);
  --color-surface-footer: var(--color-teal-950);

  /* 2.3 Card fills (used on Project Card) */
  --color-card-default: var(--color-black);
  --color-card-dim: var(--color-card-dim-raw);
  --color-card-pink: var(--color-accent-pink);
  --color-card-lemon: var(--color-accent-lemon);
  --color-footer-glow: var(--color-footer-glow-raw);

  /* 2.4 Typography — composite */
  --type-display-2xl-family: var(--font-family-sans);
  --type-display-2xl-weight: var(--font-weight-medium);
  --type-display-2xl-size: var(--font-size-72);
  --type-display-2xl-line-height: var(--line-height-80);
  --type-display-2xl-tracking: var(--tracking-tight);

  --type-display-xl-family: var(--font-family-sans);
  --type-display-xl-weight: var(--font-weight-medium);
  --type-display-xl-size: var(--font-size-56);
  --type-display-xl-line-height: var(--line-height-68);
  --type-display-xl-tracking: var(--tracking-tight);

  --type-display-md-family: var(--font-family-sans);
  --type-display-md-weight: var(--font-weight-medium);
  --type-display-md-size: var(--font-size-28);
  --type-display-md-line-height: var(--line-height-32);
  --type-display-md-tracking: var(--tracking-normal);

  --type-heading-lg-family: var(--font-family-serif);
  --type-heading-lg-weight: var(--font-weight-regular);
  --type-heading-lg-size: var(--font-size-32);
  --type-heading-lg-line-height: var(--line-height-42);
  --type-heading-lg-tracking: var(--tracking-normal);

  --type-body-lg-family: var(--font-family-serif);
  --type-body-lg-weight: var(--font-weight-regular);
  --type-body-lg-size: var(--font-size-20);
  --type-body-lg-line-height: var(--line-height-30);
  --type-body-lg-tracking: 0.5px; /* Figma body/lg tracking */
  --type-body-lg-style: normal;

  --type-body-md-italic-family: var(--font-family-serif);
  --type-body-md-italic-weight: var(--font-weight-regular);
  --type-body-md-italic-size: var(--font-size-20);
  --type-body-md-italic-line-height: var(--line-height-30);
  --type-body-md-italic-tracking: var(--type-body-lg-tracking);
  --type-body-md-italic-style: italic;

  --type-caption-family: var(--font-family-sans);
  --type-caption-weight: var(--font-weight-regular);
  --type-caption-size: var(--font-size-16);
  --type-caption-line-height: var(--line-height-22);
  --type-caption-tracking: var(--tracking-wider);

  /* Figma "Label/MD Caps": font/sans, weight/medium, text-size/xs, line-height/xs, tracking/2xl */
  --type-caps-family: var(--font-family-sans);
  --type-caps-weight: var(--font-weight-medium);
  --type-caps-size: var(--font-size-16);
  --type-caps-line-height: var(--line-height-22);
  --type-caps-tracking: var(--tracking-caps);
  --type-caps-transform: uppercase;

  /* 2.4.1 Typography — mobile aliases (Figma mobile column) */
  --type-display-2xl-size-mobile: var(--font-size-42);
  --type-display-2xl-line-height-mobile: var(--line-height-48);

  --type-display-xl-size-mobile: var(--font-size-36);
  --type-display-xl-line-height-mobile: var(--line-height-40);

  /* text-size/md: 28 on mobile (same step as desktop; Figma Starting Point) */
  --type-display-md-size-mobile: var(--font-size-28);
  --type-display-md-line-height-mobile: var(--line-height-32);

  --type-heading-lg-size-mobile: var(--font-size-24);
  --type-heading-lg-line-height-mobile: var(--line-height-32);

  --type-body-lg-size-mobile: var(--font-size-18);
  --type-body-lg-line-height-mobile: var(--line-height-26);

  --type-body-md-italic-size-mobile: var(--font-size-18);
  --type-body-md-italic-line-height-mobile: var(--line-height-26);

  --type-caption-size-mobile: var(--font-size-16);
  --type-caption-line-height-mobile: var(--line-height-22);

  --type-caps-size-mobile: var(--font-size-16);
  --type-caps-line-height-mobile: var(--line-height-22);

  /* 2.5 Spacing — intent aliases */
  --space-page-padding: var(--space-600);
  --space-grid-gap: var(--space-300);
  --space-section-gap-sm: var(--space-2400);
  --space-section-gap-md: var(--space-4000);
  --space-card-padding: var(--space-600);
  --space-stack-sm: var(--space-300);
  --space-stack-md: var(--space-600);
  --space-stack-lg: var(--space-1200);

  /* 2.6 Grid */
  --grid-columns: 12;
  --grid-max-width: var(--bp-2xl);

  /* 2.7 Shadows / effects (project cards have no drop shadow) */
  --color-hero-glow-index: var(--color-hero-glow-rose);
  --shadow-hero-glow-index: inset 0 0 24px 0 var(--color-hero-glow-index);
  --color-hero-glow-about: var(--color-hero-glow-yellow);
  --shadow-hero-glow-about: inset 0 0 24px 0 var(--color-hero-glow-about);

  /* ============================================================
   * 3. COMPONENT
   * ============================================================ */

  /* 3.1 Project Card */
  --card-radius: var(--radius-sm);

  /* 3.2 Project Tag */
  --tag-radius: var(--radius-sm);
  --tag-padding-block-start: var(--space-150);
  --tag-padding-block-end: var(--space-200);
  --tag-padding-inline: var(--space-300);
  --tag-overlay-bg: var(--color-tag-overlay);
  --tag-overlay-blur: 32px;

  /* 3.3 Section header */
  --section-header-title-color-default: var(--color-text-primary);
  --section-header-title-line-height: var(--type-display-2xl-line-height);

  /* Figma Main Container → Description Container (1282:2462): fixed content width */
  --section-header-intro-max-width: 726px;

  /* 3.4 Hero */
  --hero-background: var(--color-surface-hero);
  --hero-background-index: var(--color-surface-hero-index);
  --hero-background-about: var(--color-surface-hero-about);
  --hero-shadow-size: 24px;
  --hero-shadow-spread: calc(-1 * var(--hero-shadow-size));
  --hero-glow-shadow:
    inset var(--hero-shadow-size) 0 var(--hero-shadow-size) var(--hero-shadow-spread) var(--color-hero-glow),
    inset calc(-1 * var(--hero-shadow-size)) 0 var(--hero-shadow-size) var(--hero-shadow-spread) var(--color-hero-glow),
    inset 0 var(--hero-shadow-size) var(--hero-shadow-size) var(--hero-shadow-spread) var(--color-hero-glow);
  --hero-glow-color-index: var(--color-hero-glow-index);
  --hero-glow-color-about: var(--color-hero-glow-about);
  --hero-reveal-shadow-block-size: var(--hero-shadow-size);
  --hero-reveal-shadow-background: linear-gradient(
    to top,
    color-mix(in srgb, var(--color-hero-glow) 56%, transparent) 0%,
    color-mix(in srgb, var(--color-hero-glow) 24%, transparent) 44%,
    color-mix(in srgb, var(--color-hero-glow) 0%, transparent) 100%
  );
  --hero-headline-color: var(--color-text-brand-blue);
  --hero-padding-block-start: 84px;
  --hero-padding-block-end: 64px;
  --hero-padding-block-end-mobile: 0;
  --hero-wrapper-height-desktop: 713px;
  --hero-wrapper-max-width: 1968px;
  --hero-profile-size-desktop: 326px;
  --hero-mobile-inset: 56px;
  --hero-mobile-profile-size: 233px;
  --hero-mobile-profile-optical-offset-inline: 41px;
  --hero-mobile-profile-gap-before: 65px;
  --hero-mobile-profile-gap-after: 7px;

  /* 3.4.1 Case hero */
  --case-hero-glow: #505050; /* Figma Colors: hero/Black-glow */
  --case-title-muted: #71717b; /* Case-page production value */

  /* 3.5 Footer */
  --footer-background: var(--color-surface-footer);
  --footer-shadow-size: 24px;
  --footer-shadow-spread: calc(-1 * var(--footer-shadow-size));
  --footer-glow-shadow:
    inset var(--footer-shadow-size) 0 var(--footer-shadow-size) var(--footer-shadow-spread) var(--color-footer-glow),
    inset calc(-1 * var(--footer-shadow-size)) 0 var(--footer-shadow-size) var(--footer-shadow-spread) var(--color-footer-glow),
    inset 0 calc(-1 * var(--footer-shadow-size)) var(--footer-shadow-size) var(--footer-shadow-spread) var(--color-footer-glow);
  --footer-reveal-shadow-block-size: var(--footer-shadow-size);
  --footer-reveal-shadow-background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--color-footer-glow) 56%, transparent) 0%,
    color-mix(in srgb, var(--color-footer-glow) 24%, transparent) 44%,
    color-mix(in srgb, var(--color-footer-glow) 0%, transparent) 100%
  );
  --footer-tagline-color: var(--color-text-olive);
  --footer-wrapper-min-height-desktop: 910px;
  --footer-meta-stack-gap: var(--space-400);
  --footer-meta-tracking: 0.5px;
  --footer-wrapper-min-height-mobile: 740px;

  /* 3.6 Layout utilities
   * `.site-shell` establishes the shared stacking context for content + header.
   * Sticky footer sits under `main` so the area17-style reveal (main slides, footer shows) works.
   */
  --layer-hero-under: 0;
  --layer-after-hero: 1;
  --layer-footer-under: 1;
  --layer-main: 2;
  --layer-sticky: 1000;

  /* Fixed header overlays only — do not use on .site-header (Chromium mix-blend) */
  --layer-header-glass: 2147483000;
  --layer-header-text: 2147483001;
  --layer-header-hit: 2147483002;
  --layer-mobile-menu: 2147483600;
  --layer-mobile-menu-text: 2147483601;
  --header-overlay-bg: var(--color-tag-overlay);
  --header-overlay-blur: 48px;
  --mobile-menu-overlay-blur: 48px;
  --site-header-margin-offset: -84px;
  --section-header-min-height: 100vh;
}

/* ============================================================
 * 4. BREAKPOINT OVERRIDES
 * ============================================================ */

@media (max-width: 1023px) {
  :root {
    --space-section-gap-sm: var(--space-1600);
    --space-section-gap-md: var(--space-2400);
  }
}

@media (max-width: 767px) {
  :root {
    /* mobile typography — switch semantic tokens to explicit *-mobile aliases */
    --type-display-2xl-size: var(--type-display-2xl-size-mobile);
    --type-display-2xl-line-height: var(--type-display-2xl-line-height-mobile);

    --type-display-xl-size: var(--type-display-xl-size-mobile);
    --type-display-xl-line-height: var(--type-display-xl-line-height-mobile);

    --type-display-md-size: var(--type-display-md-size-mobile);
    --type-display-md-line-height: var(--type-display-md-line-height-mobile);

    --type-heading-lg-size: var(--type-heading-lg-size-mobile);
    --type-heading-lg-line-height: var(--type-heading-lg-line-height-mobile);

    --type-body-lg-size: var(--type-body-lg-size-mobile);
    --type-body-lg-line-height: var(--type-body-lg-line-height-mobile);

    --type-body-md-italic-size: var(--type-body-md-italic-size-mobile);
    --type-body-md-italic-line-height: var(--type-body-md-italic-line-height-mobile);

    --type-caption-size: var(--type-caption-size-mobile);
    --type-caption-line-height: var(--type-caption-line-height-mobile);

    --type-caps-size: var(--type-caps-size-mobile);
    --type-caps-line-height: var(--type-caps-line-height-mobile);

    /* mobile spacing — сжимаем padding и gap */
    --space-page-padding: var(--space-400);
    --space-grid-gap: var(--space-200);
    --space-card-padding: var(--space-400);

    --tag-overlay-blur: 20px;
    --header-overlay-blur: 24px;
  }
}