/* ===========================================================
   Corofy — Design Tokens
   Direction: Clean Industrial
   Brand colors sampled from the Corofy logo: #1830D0 / #9858C8
   =========================================================== */

:root {
  /* ---------- Brand: indigo (primary) ---------- */
  --brand-50:  #F2F4FE;
  --brand-100: #E4E9FD;
  --brand-200: #C9D1FA;
  --brand-300: #A3AEF3;
  --brand-400: #6E7DEA;
  --brand-500: #3D53E0;
  --brand-600: #1830D0;  /* brand primary */
  --brand-700: #1428A8;
  --brand-800: #111F80;
  --brand-900: #0C1657;
  --brand-950: #070E38;

  /* ---------- Brand: violet (accent) ---------- */
  --accent-300: #D2B6EA;
  --accent-400: #B683DA;
  --accent-500: #9858C8;  /* brand accent */
  --accent-600: #8043B0;
  --accent-700: #67348F;

  /* ---------- Ink: deep navy surfaces ---------- */
  --ink-950: #060A1D;
  --ink-900: #0A0F2B;
  --ink-800: #111841;
  --ink-700: #1A2358;

  /* ---------- Neutrals (cool cast) ---------- */
  --paper:      #FFFFFF;
  --surface:    #F7F8FC;
  --surface-2:  #EFF2F9;
  --line:       #E2E7F2;
  --line-strong:#CFD6E7;
  --heading:    #0F1433;
  --text:       #2B3049;
  --text-muted: #626B8B;
  --text-faint: #8B93AE;

  /* on-dark */
  --on-dark:        #FFFFFF;
  --on-dark-muted:  rgba(255, 255, 255, 0.72);
  --on-dark-faint:  rgba(255, 255, 255, 0.52);
  --on-dark-line:   rgba(255, 255, 255, 0.14);

  /* ---------- Semantic ---------- */
  --success: #0E9F6E;
  --warning: #C77700;
  --danger:  #D33A3A;

  /* ---------- Typography ---------- */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --fs-display: clamp(2.6rem, 1.45rem + 4.7vw, 5rem);
  --fs-h1:      clamp(2.2rem, 1.5rem + 2.9vw, 3.6rem);
  --fs-h2:      clamp(1.85rem, 1.35rem + 2.05vw, 2.85rem);
  --fs-h3:      clamp(1.25rem, 1.08rem + 0.72vw, 1.6rem);
  --fs-h4:      clamp(1.08rem, 1rem + 0.36vw, 1.25rem);
  --fs-lead:    clamp(1.05rem, 1rem + 0.36vw, 1.2rem);
  --fs-body:    1rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight: 1.06;
  --lh-snug:  1.22;
  --lh-body:  1.72;

  --tracking-tight: -0.025em;
  --tracking-eyebrow: 0.16em;

  /* ---------- Spacing (8px grid) ---------- */
  --s-1:  0.25rem;  /*  4 */
  --s-2:  0.5rem;   /*  8 */
  --s-3:  0.75rem;  /* 12 */
  --s-4:  1rem;     /* 16 */
  --s-5:  1.5rem;   /* 24 */
  --s-6:  2rem;     /* 32 */
  --s-7:  2.5rem;   /* 40 */
  --s-8:  3rem;     /* 48 */
  --s-9:  4rem;     /* 64 */
  --s-10: 5rem;     /* 80 */
  --s-11: 6rem;     /* 96 */
  --s-12: 8rem;     /* 128 */

  --section-y: clamp(4rem, 2.5rem + 6vw, 7.5rem);
  --container: 1240px;
  --container-narrow: 920px;
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem);

  /* ---------- Radius ---------- */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-full: 999px;

  /* ---------- Shadows (indigo-tinted, never pure black) ---------- */
  --shadow-xs: 0 1px 2px rgba(15, 20, 51, 0.06);
  --shadow-sm: 0 2px 4px rgba(15, 20, 51, 0.05), 0 1px 2px rgba(24, 48, 208, 0.05);
  --shadow-md: 0 8px 20px -6px rgba(15, 20, 51, 0.10), 0 2px 6px rgba(24, 48, 208, 0.05);
  --shadow-lg: 0 20px 44px -14px rgba(15, 20, 51, 0.18), 0 6px 14px -8px rgba(24, 48, 208, 0.10);
  --shadow-xl: 0 44px 88px -28px rgba(12, 22, 87, 0.30), 0 12px 28px -16px rgba(24, 48, 208, 0.16);
  --shadow-brand: 0 14px 30px -10px rgba(24, 48, 208, 0.44);

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur:      280ms;
  --dur-slow: 620ms;

  /* ---------- Layout aids ---------- */
  /* tall enough to seat the 68px logo with breathing room */
  --header-h: 96px;
  --topbar-h: 40px;
}

@media (max-width: 1080px) {
  :root { --header-h: 84px; }
}
@media (max-width: 520px) {
  :root { --header-h: 72px; }
}