/* Little Monster Creative Studio — design foundations.
   Theme-independent scales live here. Surface and colour mappings live in the
   theme files so a future theme can change without rewriting components. */
:root {
  /* Official brand typography */
  --font-body: "Inter", Arial, sans-serif;
  --font-ui: "Inter", Arial, sans-serif;
  --font-heading: "Inter", Arial, sans-serif;
  --font-brand: "Minion", Georgia, serif;

  --text-display-xl: clamp(58px, 9vw, 136px);
  --text-display-lg: clamp(52px, 6.4vw, 98px);
  --text-heading-1: clamp(44px, 6.6vw, 102px);
  --text-heading-2: clamp(42px, 5vw, 72px);
  --text-heading-3: 24px;
  --text-body-lg: 17px;
  --text-body: 15px;
  --text-body-sm: 13px;
  --text-caption: 11px;
  --text-label: 9px;
  --text-nav: 9px;

  --weight-regular: 400;
  --weight-medium: 520;
  --weight-semibold: 650;
  --weight-bold: 700;

  --line-height-tight: .88;
  --line-height-heading: 1.04;
  --line-height-body: 1.65;
  --line-height-relaxed: 1.75;

  --tracking-tight: -.055em;
  --tracking-heading: -.065em;
  --tracking-normal: 0;
  --tracking-wide: .12em;
  --tracking-label: .14em;
  --tracking-extra-wide: .18em;

  /* Spacing scale. Special composition values remain local when intentional. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --space-32: 128px;
  --container-gutter: 32px;
  --container-gutter-mobile: 14px;
  --section-space: 110px;

  /* Borders and shape */
  --border-width-default: 1px;
  --border-width-strong: 2px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-panel: 34px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Motion — values match the existing interaction feel. */
  --duration-instant: .15s;
  --duration-fast: .2s;
  --duration-normal: .25s;
  --duration-medium: .3s;
  --duration-slow: .55s;
  --ease-standard: ease;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-emphasized: cubic-bezier(.16, 1, .3, 1);

  /* Layering */
  --z-content: 1;
  --z-header: 1000;
  --z-menu-backdrop: 1199;
  --z-navigation: 1200;
  --z-menu: 1201;
  --z-menu-toggle: 1202;
  --z-skip-link: 10000;

  /* Documented breakpoint system. CSS variables cannot be used directly in
     media-query conditions; component queries retain equivalent literal values. */
  --breakpoint-small: 600px;
  --breakpoint-mobile: 700px;
  --breakpoint-mobile-wide: 760px;
  --breakpoint-tablet: 900px;
  --breakpoint-desktop: 1160px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0s;
    --duration-fast: 0s;
    --duration-normal: 0s;
    --duration-medium: 0s;
    --duration-slow: 0s;
  }
}