/* Design tokens from the Dozen brand Figma (May 2026). */

/* Breakpoints below are documented constants, not custom properties: media
   query conditions can't consume custom properties, so reproduce these
   values as literals in every @media rule that needs them.
     640px   mobile → tablet
     1024px  tablet → desktop
     1440px  exact Figma board width; pixel-for-pixel applies at and above this */

:root {
  /* Brand color names mirror the Figma variables */
  --dozen-teal: #78e3d8;
  --dozen-blue: #513fc7;
  --dozen-red: #e65925;
  --dozen-dark: #333333;
  --light-purple: #aaa3df;
  --pure-white: #ffffff;
  --off-white: #f3f4f4;
  --red-fade: #ee7773;
  --red-fade-60: rgba(238, 119, 115, 0.6); /* CTA gradient's second stop */
  --dozen-blue-60: rgba(81, 63, 199, 0.6); /* Story carousel photo tint */
  --gradient-blue-deep: linear-gradient(
    96deg,
    #3d2f95,
    var(--dozen-blue)
  ); /* pill/CTA fill, repeated site-wide */

  /* Headings use General Sans; body copy uses DM Sans. */
  --font-heading: "General Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;

  /* Type scale pinned to BOTH designed boards: exact at 402 (mobile) and
     1440 (desktop), linear between. Mobile h1 is 36/43.2 — the 1.2 leading
     at small widths is applied in section/base styles where the design calls
     for it; the token keeps the desktop value. */
  --h1-size-desktop: 4rem; /* 64px */
  --h1-size: clamp(2.25rem, 1.5723rem + 2.6975vw, var(--h1-size-desktop));
  --h1-leading: 1;

  --h2-size-desktop: 3rem; /* 48px */
  --h2-size: clamp(2rem, 1.6667rem + 1.4815vw, var(--h2-size-desktop));
  --h2-leading: 1.2;

  --h3-size-desktop: 2.5rem; /* 40px, Medium Italic */
  --h3-size: clamp(1.75rem, 1.5rem + 1.1111vw, var(--h3-size-desktop));
  --h3-leading: 1.40625;

  --h4-size-desktop: 1.5rem; /* 24px */
  --h4-size: clamp(1.25rem, 1.1667rem + 0.3704vw, var(--h4-size-desktop));
  --h4-leading: 1.40625;

  --p-size: 1rem; /* 16px — fixed, no fluid scaling below desktop */
  --p-leading: 1.40625;

  --weight-heading: 500;
  --weight-body: 400;

  /* Spacing scale, derived from observed section paddings across the Figma
     frames (services, case studies, final cta, footer, overlay bars). */
  --space-10: 0.625rem;
  --space-20: 1.25rem;
  --space-40: 2.5rem;
  --space-60: 3.75rem;
  --space-80: 5rem;
  --space-100: 6.25rem;
  --space-120: 7.5rem;
  --space-240: 15rem;

  /* Layout */
  --content-max: 1280px; /* inner content column */
  --board-max: 1440px; /* full desktop board width */
  --container-padding: clamp(
    2.5rem,
    5.5556vw,
    5rem
  ); /* 40px at the 402 mobile board → 80px at the 1440 desktop board */
}