/* ============================================================================
   HighCohesion Tech — Design Tokens  (adopted from the Claude Design brand)
   Light, warm-paper environment; a terracotta accent carries identity.
   Single type family: Onest.  Source of truth for color & scale.
   ========================================================================== */

:root {
  /* --- Surfaces (warm paper, light) --------------------------------------- */
  --paper:      #FBF7F2;   /* page background */
  --card:       #FFFFFF;   /* cards, panels, elevated bands */
  --graphite:   #21242B;   /* footer / dark band */

  /* --- Text --------------------------------------------------------------- */
  --ink:        #23262D;   /* primary text — ~12:1 on paper */
  --muted:      #6B655C;   /* secondary text — ~5.3:1 on paper */
  --faint:      #948C82;   /* meta / eyebrows on light (large or non-essential) */
  --on-dark:    #EDEAE4;   /* text on graphite footer */
  --on-dark-muted:#9C988F;

  /* --- Lines -------------------------------------------------------------- */
  --line:       #E8DFD3;   /* hairlines, borders */
  --line-2:     #DED3C4;   /* stronger border / hover */

  /* --- Brand: terracotta -------------------------------------------------- */
  --accent:      #E2674A;
  --accent-deep: #C2502F;  /* text-on-light accent, hover fills */
  --accent-soft: #F6E6DD;  /* tint bg for icon chips / badges */
  --warm-2:      #E8924A;  /* secondary warm (hero glow) */
  --on-accent:   #FFFFFF;  /* text on accent fills */

  /* --- Focus -------------------------------------------------------------- */
  --focus-ring: 0 0 0 3px var(--paper), 0 0 0 5px color-mix(in srgb, var(--accent) 60%, transparent);

  /* --- Typography (Onest, single family) ---------------------------------- */
  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.6rem, 1.5rem + 4.6vw, 5.6rem);   /* hero h1, max ~90px */
  --fs-h2:      clamp(1.75rem, 1.25rem + 1.9vw, 2.55rem);
  --fs-h3:      1.25rem;
  --fs-lead:    clamp(1.06rem, 0.98rem + 0.5vw, 1.3rem);
  --fs-body:    1.0625rem;   /* 17px */
  --fs-sm:      0.9375rem;   /* 15px */
  --fs-xs:      0.8125rem;   /* 13px */

  --lh-tight:   1.04;
  --lh-snug:    1.14;
  --lh-body:    1.62;
  --lh-relaxed: 1.68;

  --tracking-display: -0.035em;
  --tracking-tight:   -0.02em;
  --tracking-label:    0.14em;   /* eyebrows */

  --measure: 66ch;

  /* --- Spacing ------------------------------------------------------------ */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 2.5rem;  --sp-8: 3rem;
  --sp-9: 4rem;    --sp-10: 5rem;  --sp-11: 6.5rem;

  --section-y: clamp(3.75rem, 2.5rem + 5.5vw, 6.25rem);
  --gap:       clamp(1.1rem, 0.8rem + 1.1vw, 1.4rem);

  /* --- Layout ------------------------------------------------------------- */
  --container:  1200px;
  --container-hero: 1320px;
  --page-pad:   clamp(1.25rem, 0.7rem + 2.6vw, 2.5rem);
  --header-h:   4.625rem;

  /* --- Radii -------------------------------------------------------------- */
  --r-xs:  8px;  --r-sm: 10px; --r-md: 12px; --r-lg: 18px;
  --r-xl: 20px;  --r-2xl: 24px; --r-pill: 999px;

  /* --- Shadows (soft, warm-neutral) --------------------------------------- */
  --shadow-xs: 0 4px 16px rgba(35,38,45,.05);
  --shadow-sm: 0 8px 24px rgba(35,38,45,.07);
  --shadow-md: 0 22px 50px rgba(35,38,45,.09);
  --shadow-lg: 0 30px 70px rgba(35,38,45,.12);
  --shadow-accent: 0 16px 34px color-mix(in srgb, var(--accent) 30%, transparent);

  /* --- Motion ------------------------------------------------------------- */
  --ease:      cubic-bezier(.2,.7,.2,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 280ms; --dur-4: 600ms; --dur-5: 850ms;

  /* --- Z-index scale ------------------------------------------------------ */
  --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-header: 300;
  --z-drawer: 500; --z-toast: 700;
}