/* NextLevelBusiness design tokens.
   Ported from the brand design system (Claude Design project, v1.0,
   "Design System (Standalone).html"). Values are the system's, not invented.
   Sizes are expressed as clamp() so the page is fluid 375px -> 1440px. */
:root{
  color-scheme: light;

  /* ---- Brand ---- */
  --ink:        #002a3a;   /* primary navy/teal */
  --ink-80:     #33555f;
  --ink-60:     #668088;
  --ink-40:     #99aab1;
  --ink-20:     #ccd4d7;
  --ink-08:     #eef1f2;

  --red:        #fa244c;
  --yellow:     #fdc73d;
  --green:      #3cc66b;
  --sky:        #67cfee;
  --gray:       #e8e8e8;

  --paper:      #fafaf7;
  --white:      #ffffff;

  /* Accessible variants. The brand ramp above is kept intact, but --red at 11-15px
     is only 3.70:1 on paper and --ink-60 is 4.01:1, both under the 4.5:1 AA floor.
     These are the same hue, darkened to the first step that clears it. */
  --red-ink:    #da052d;   /* small red text: 4.97:1 on paper, 4.58:1 on ink-08 */
  --red-deep:   #eb0530;   /* red as a background under white text: 4.57:1 */
  --text-muted: var(--ink-80);  /* secondary text: 7.71:1 on paper */
  --rule:       rgba(0,42,58,.14);
  --rule-soft:  rgba(0,42,58,.08);

  /* ---- Type families ---- */
  --display: 'General Sans', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Geist', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --accent:  'Instrument Serif', 'Georgia', serif;

  /* ---- Fluid type scale ---- */
  --fs-display: clamp(2.125rem,  2.90vw + 1.45rem, 3.25rem);  /* 34 -> 52  hero */
  --fs-h1:      clamp(2rem,      2.60vw + 1.30rem, 3rem);     /* 32 -> 48 */
  --fs-h2:      clamp(1.5rem,    1.60vw + 1.10rem, 2rem);     /* 24 -> 32 */
  --fs-h3:      1.25rem;                                      /* 20, uppercase, tracked */
  --fs-stat:    clamp(2rem,      2.20vw + 1.35rem, 2.75rem);  /* 32 -> 44 */
  --fs-lede:    clamp(1.0625rem, 0.55vw + 0.94rem, 1.25rem);  /* 17 -> 20 */
  --fs-body:    1rem;                                         /* 16 */
  --fs-sm:      0.875rem;                                     /* 14 */
  --fs-xs:      0.8125rem;                                    /* 13 */
  --fs-caps:    0.6875rem;                                    /* 11, tracked .14em */

  /* ---- Line heights ---- */
  --lh-display: 1.05;
  --lh-head:    1.1;
  --lh-prose:   1.6;
  --lh-ui:      1.5;

  /* ---- Fluid spacing ---- */
  --space-2xs: clamp(0.5rem,  0.30vw + 0.43rem, 0.75rem);
  --space-xs:  clamp(0.75rem, 0.50vw + 0.63rem, 1.125rem);
  --space-sm:  clamp(1rem,    0.80vw + 0.80rem, 1.5rem);
  --space-md:  clamp(1.5rem,  1.50vw + 1.15rem, 2.5rem);
  --space-lg:  clamp(2.5rem,  3.00vw + 1.75rem, 4.5rem);
  --space-xl:  clamp(3.5rem,  5.00vw + 2.25rem, 7rem);
  --pad-x:     clamp(24px, 4vw, 64px);

  /* ---- Radii ---- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* ---- Elevation ---- */
  --sh-1: 0 1px 2px rgba(0,42,58,.06), 0 1px 1px rgba(0,42,58,.04);
  --sh-2: 0 4px 12px rgba(0,42,58,.08), 0 2px 4px rgba(0,42,58,.04);
  --sh-3: 0 20px 40px rgba(0,42,58,.12), 0 6px 14px rgba(0,42,58,.06);

  /* ---- Layout ---- */
  --wide: 1200px;
  --measure: 62ch;
  --ease: cubic-bezier(.16,1,.3,1);
}