/* ==========================================================================
   Layer 1: Token System — Utopia-powered fluid scales + static scales
   Generated via https://utopia.fyi/ with:
   Min viewport: 320px, Max viewport: 1240px
   Min ratio: 1.2 (minor third), Max ratio: 1.333 (perfect fourth)
   Min base: 0.9375rem (15px), Max base: 1rem (16px)
   ========================================================================== */

:root {
  /* --- Type scale (fluid) --- */
  --step--2: 0.5628rem;                                                  /* 9px (static) */
  --step--1: 0.7502rem;                                                  /* 12px (static) */
  --step-0:  clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);              /* 15px → 16px */
  --step-1:  clamp(1.125rem, 1.0527rem + 0.3617vw, 1.333rem);           /* 18px → 21px */
  --step-2:  clamp(1.35rem, 1.2015rem + 0.7424vw, 1.7769rem);           /* 22px → 28px */
  --step-3:  clamp(1.62rem, 1.3596rem + 1.3019vw, 2.3686rem);           /* 26px → 38px */
  --step-4:  clamp(1.944rem, 1.522rem + 2.1101vw, 3.1573rem);           /* 31px → 51px */
  --step-5:  clamp(2.3328rem, 1.6803rem + 3.2625vw, 4.2087rem);         /* 37px → 67px */

  /* --- Semantic text sizes (= step aliases, themes can remap) --- */
  --text-xs: var(--step--2);    /* 10px — fine print, captions */
  --text-sm: var(--step--1);    /* 12-13px — card body, nav, labels */
  --text-md: var(--step-0);     /* 15-16px — standard body (= Utopia base) */
  --text-lg: var(--step-1);     /* 18-20px — lede, section descriptions */
  --text-xl: var(--step-2);     /* 22-25px — large emphasis */

  /* --- Semantic component radii --- */
  --radius-component-xs: var(--radius-sm);   /* badges xs, chips xs */
  --radius-component-sm: var(--radius-md);   /* badges sm, buttons sm, inputs sm */
  --radius-component-md: var(--radius-lg);   /* badges md, buttons md, inputs md */
  --radius-component-lg: var(--radius-xl);   /* buttons lg, cards, modals */

  /* --- Space scale (fluid, locked to type base) --- */
  --space-3xs: clamp(0.2344rem, 0.2289rem + 0.0272vw, 0.25rem);         /* 4px → 4px */
  --space-2xs: clamp(0.4688rem, 0.4579rem + 0.0543vw, 0.5rem);          /* 8px → 8px */
  --space-xs:  clamp(0.7031rem, 0.6868rem + 0.0815vw, 0.75rem);         /* 11px → 12px */
  --space-s:   clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);            /* 15px → 16px */
  --space-m:   clamp(1.4062rem, 1.3736rem + 0.163vw, 1.5rem);           /* 22px → 24px */
  --space-l:   clamp(1.875rem, 1.8315rem + 0.2174vw, 2rem);             /* 30px → 32px */
  --space-xl:  clamp(2.8125rem, 2.7473rem + 0.3261vw, 3rem);            /* 45px → 48px */
  --space-2xl: clamp(3.75rem, 3.663rem + 0.4348vw, 4rem);               /* 60px → 64px */
  --space-3xl: clamp(5.625rem, 5.4946rem + 0.6522vw, 6rem);             /* 90px → 96px */
  --space-4xl: clamp(7.5rem, 7.3261rem + 0.8696vw, 8rem);              /* 120px → 128px */

  /* One-up pairs — bigger responsive jumps */
  --space-s-m:   clamp(0.9375rem, 0.7418rem + 0.9783vw, 1.5rem);        /* 15px → 24px */
  --space-s-l:   clamp(0.9375rem, 0.5679rem + 1.8478vw, 2rem);          /* 15px → 32px */
  --space-m-xl:  clamp(1.4062rem, 0.8519rem + 2.7717vw, 3rem);          /* 22px → 48px */
  --space-l-2xl: clamp(1.875rem, 1.1359rem + 3.6957vw, 4rem);           /* 30px → 64px */

  /* --- Grid --- */
  --grid-gutter: var(--space-s-m);
  --grid-max-width: 73.75rem;

  /* --- Radii (static) --- */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* --- Shadows (static) --- */
  --shadow-xs:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm:  0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* --- Weights --- */
  --weight-light: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* --- Easing --- */
  --ease: cubic-bezier(0.25, 0, 0.5, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-out: cubic-bezier(0, 0.55, 0.45, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-elastic: cubic-bezier(0.5, 1.25, 0.75, 1.25);
  --ease-bounce: cubic-bezier(0.2, 0.6, 0.35, 1);

  /* --- Line heights --- */
  --line-none: 1;
  --line-tight: 1.15;
  --line-snug: 1.3;
  --line-normal: 1.5;
  --line-relaxed: 1.625;
  --line-loose: 1.8;

  /* --- Letter spacing --- */
  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-body: 0.02em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.06em;
  --tracking-widest: 0.08em;

  /* --- Transitions --- */
  --transition-fast: 150ms var(--ease);
  --transition-base: 250ms var(--ease);
  --transition-slow: 400ms var(--ease);
}