@layer reset, tokens, base, components, responsive, utilities;

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-tight-latin-400-normal.ttf") format("truetype");
}

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-tight-latin-500-normal.ttf") format("truetype");
}

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-tight-latin-600-normal.ttf") format("truetype");
}

@layer tokens {
  :root {
    color-scheme: dark;

    --color-primary: #e30068;
    --color-primary-hover: #f0207a;
    --color-primary-pressed: #c4005a;
    --color-primary-accessible: #ff5c9a;
    --color-primary-soft: rgb(227 0 104 / 0.16);
    --color-on-primary: #ffffff;

    --color-canvas-deep: #0d0b0e;
    --color-canvas: #131114;
    --color-surface: #1a171b;
    --color-surface-elevated: #242026;

    --color-text-primary: #f7f5f8;
    --color-text-secondary: #c9c4cc;
    --color-text-muted: #8f8893;

    --color-border: rgb(255 255 255 / 0.12);
    --color-border-strong: rgb(255 255 255 / 0.28);
    --color-overlay: rgb(8 6 10 / 0.72);
    --color-focus: var(--color-primary-accessible);
    --color-tap-highlight: rgb(255 255 255 / 0.12);
    --color-numeral-stroke: rgb(184 178 190 / 0.5);
    --color-numeral-fill: rgb(184 178 190 / 0.14);

    --rgb-canvas: 19 17 20;
    --rgb-canvas-deep: 13 11 14;
    --rgb-primary: 227 0 104;
    --rgb-white: 255 255 255;

    --font-sans: "Inter Tight", Arial, Helvetica, system-ui, sans-serif;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;

    --fs-body: 1rem;
    --fs-nav: 0.9375rem;
    --fs-button: 1rem;
    --fs-badge: 0.6875rem;
    --fs-chip: 0.75rem;
    --fs-hero-title: clamp(1.875rem, 3.6vw, 3.5rem);
    --fs-hero-meta: clamp(0.8125rem, 1.1vw, 1rem);
    --fs-rail-title: clamp(1.0625rem, 1.6vw, 1.5rem);
    --fs-rail-subtitle: clamp(0.8125rem, 1vw, 0.9375rem);
    --fs-expanded-title: 1.0625rem;
    --lh-tight: 1.1;
    --lh-body: 1.5;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 80px;

    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);

    --gutter: clamp(16px, 3.4vw, 64px);
    --gutter-left: max(var(--gutter), var(--safe-left));
    --gutter-right: max(var(--gutter), var(--safe-right));
    --rail-gap: 8px;
    --section-gap: clamp(24px, 2.6vw, 36px);
    --rail-header-gap: var(--space-3);
    --header-h: 56px;
    --header-sticky-h: var(--header-h);
    --header-offset: calc(var(--safe-top) + var(--header-sticky-h));

    --mobile-nav-h: 60px;
    --mobile-nav-pad: 4px;
    --mobile-nav-inset: var(--space-4);
    --mobile-nav-bottom: max(var(--space-3), calc(var(--safe-bottom) + var(--space-2)));
    --mobile-nav-reserve: calc(var(--mobile-nav-h) + var(--mobile-nav-bottom));
    --header-sentinel-h: 12px;

    --hero-ratio: 2.2;
    --hero-min-h: 420px;
    --hero-max-h: 720px;
    --hero-gap: clamp(28px, 3.2vw, 46px);
    --hero-pad: var(--space-5);

    --card-ratio: 16 / 9;
    --cards-per-view: 3;
    --slot-w: min(58vw, 280px);
    --selection-scale: 1.4;

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --radius-expanded: 12px;

    --shadow-elevated: 0 4px 12px rgb(0 0 0 / 0.55);
    --shadow-preview:
      0 0 0 1px rgb(255 255 255 / 0.08),
      0 20px 48px -12px rgb(0 0 0 / 0.65),
      0 6px 20px rgb(0 0 0 / 0.4);
    --shadow-overlay: 0 24px 80px rgb(0 0 0 / 0.7);
    --shadow-hero: 0 0 0 1px rgb(255 255 255 / 0.06), 0 14px 32px -14px rgb(0 0 0 / 0.6);
    --numeral-stroke-w: 2px;

    --motion-instant: 90ms;
    --motion-micro: 150ms;
    --motion-fast: 180ms;
    --motion-standard: 220ms;
    --motion-expand: 240ms;
    --motion-screen: 400ms;

    --motion-hover-intent: 350ms;
    --motion-press-delay: 40ms;
    --motion-delay-content: 60ms;
    --motion-stagger: 40ms;

    --motion-reveal-distance: 12px;

    --ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-exit: cubic-bezier(0.64, 0, 0.78, 0);
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

    --z-rail-controls: 10;
    --z-fab: 50;
    --z-preview: 60;
    --z-mobile-nav: 90;
    --z-header: 100;
    --z-search: 200;
    --z-backdrop: 900;
    --z-modal: 1000;
    --z-toast: 1100;
    --z-gate: 1150;
    --z-intro: 1200;
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --motion-instant: 0ms;
      --motion-micro: 100ms;
      --motion-fast: 100ms;
      --motion-standard: 120ms;
      --motion-expand: 120ms;
      --motion-screen: 150ms;
      --motion-press-delay: 0ms;
      --motion-delay-content: 0ms;
      --motion-stagger: 0ms;
      --motion-reveal-distance: 0px;
    }
  }
}