/* =============================================================================
   01-tokens.css — design decisions only. Mirror Figma text styles (node 1715:863).
   ============================================================================= */

:root {
  /* --- Colors --- */
  --surface: #f6f6f5;
  --surface-raised: #efeeed;
  --surface-card-yellow: #eeefe4;
  --surface-card-blue: #e6e6e8;
  --surface-footer: #26241e;
  --text: #0f0e0c;
  --text-muted: #777470;
  --border: rgba(197, 193, 186, 0.15);
  --brand: #00eac3;
  --brand-hover: #00c1a4;
  --periwinkle-50: #e1e2f3;
  --highlight-lime: #ecf0ce;

  /* --- Font families --- */
  --font-sans: "Haskoy Wght", sans-serif;
  --font-mono: "Basically A Mono", ui-monospace, monospace;

  /* --- Eyebrow (Basically A Mono SemiBold) --- */
  --font-eyebrow-family: var(--font-mono);
  --font-eyebrow-size: 10px;
  --font-eyebrow-weight: 600;
  --font-eyebrow-line: 12px;
  --font-eyebrow-tracking: 0.6px;

  /* --- Display (Basically A Mono) --- */
  --font-display-family: var(--font-mono);
  --font-display-size: 72px;
  --font-display-weight: 400;
  --font-display-line: 80px;
  --font-display-line-ratio: 1.111;
  --font-display-tracking: -0.72px;
  --font-display-size-mobile: 56px;
  --font-display-line-mobile: 64px;
  --font-display-tracking-mobile: -0.56px;

  /* --- Display S (Basically A Mono) --- */
  --font-display-s-family: var(--font-mono);
  --font-display-s-size: 48px;
  --font-display-s-weight: 400;
  --font-display-s-line: 56px;
  --font-display-s-line-ratio: 1.167;
  --font-display-s-tracking: -0.48px;

  /* --- Body / Haskoy --- */
  --font-body-family: var(--font-sans);
  --font-body-size: 14px;
  --font-body-weight: 400;
  --font-body-line: 20px;
  --font-body-tracking: 0;

  /* --- Body / Basically A Mono --- */
  --font-body-mono-family: var(--font-mono);
  --font-body-mono-size: 14px;
  --font-body-mono-weight: 400;
  --font-body-mono-line: 18px;
  --font-body-mono-tracking: 0;

  /* --- H1 / Haskoy --- */
  --font-h1-family: var(--font-sans);
  --font-h1-size: 28px;
  --font-h1-weight: 400;
  --font-h1-line: 38px;
  --font-h1-tracking: 0;

  /* --- H1 / Basically A Mono --- */
  --font-h1-mono-family: var(--font-mono);
  --font-h1-mono-size: 28px;
  --font-h1-mono-weight: 400;
  --font-h1-mono-line: 38px;
  --font-h1-mono-tracking: 0;

  /* --- H2 / Haskoy --- */
  --font-h2-family: var(--font-sans);
  --font-h2-size: 22px;
  --font-h2-weight: 400;
  --font-h2-line: 26px;
  --font-h2-tracking: 0.44px;

  /* --- H2 / Basically A Mono --- */
  --font-h2-mono-family: var(--font-mono);
  --font-h2-mono-size: 22px;
  --font-h2-mono-weight: 400;
  --font-h2-mono-line: 26px;
  --font-h2-mono-tracking: 0.44px;

  /* --- H3 / Basically A Mono (mono only — 16px) --- */
  --font-h3-mono-family: var(--font-mono);
  --font-h3-mono-size: 16px;
  --font-h3-mono-weight: 500;
  --font-h3-mono-line: 22px;
  --font-h3-mono-tracking: 0.16px;

  /* --- H4 / Haskoy --- */
  --font-h4-family: var(--font-sans);
  --font-h4-size: 12px;
  --font-h4-weight: 500;
  --font-h4-line: 16px;
  --font-h4-tracking: 0.24px;

  /* --- H4 / Basically A Mono --- */
  --font-h4-mono-family: var(--font-mono);
  --font-h4-mono-size: 12px;
  --font-h4-mono-weight: 500;
  --font-h4-mono-line: 16px;
  --font-h4-mono-tracking: 0.24px;

  /* --- Meta / Haskoy --- */
  --font-meta-family: var(--font-sans);
  --font-meta-size: 10px;
  --font-meta-weight: 500;
  --font-meta-line: 14px;
  --font-meta-tracking: 0.2px;

  /* --- Meta / Basically A Mono --- */
  --font-meta-mono-family: var(--font-mono);
  --font-meta-mono-size: 10px;
  --font-meta-mono-weight: 500;
  --font-meta-mono-line: 14px;
  --font-meta-mono-tracking: 0;

  /* --- Dimensions: spacing (Figma dimension/d-*) --- */
  --d-0: 0px;
  --d-0_5: 2px;
  --d-1: 4px;
  --d-1_5: 6px;
  --d-2: 8px;
  --d-3: 12px;
  --d-4: 16px;
  --d-5: 20px;
  --d-6: 24px;
  --d-8: 32px;
  --d-10: 40px;
  --d-12: 48px;
  --d-14: 56px;
  --d-16: 64px;
  --d-20: 80px;
  --d-35: 140px;
  --d-45: 180px;

  /* --- Section spacing (homepage shells) --- */
  --space-home-trusted-bottom: var(--d-10);
  --space-home-case-studies-top: var(--d-10);
  --space-home-case-studies-bottom: var(--d-35);
  --space-home-three-up-top: var(--d-20);
  --space-home-three-up-bottom: var(--d-45);

  /* --- Dimensions: radius (Figma radius/rounded-*) --- */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius: 4px;
  --radius-m: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;

  /* --- Layout max-widths --- */
  --width-display: 783px;
  --width-body: 414px;
  --width-content: 1300px;
  --width-features: 1300px;
  --width-blog-prose: 34.375rem; /* 550px — blog body column */
  --width-blog-wide: 50rem; /* 800px — wide charts / comparison tables */

  /* --- Legacy aliases (remove as files migrate) --- */
  --color--grey--200: var(--surface);
  --color--grey--400-15: var(--border);
  --color-grey-100: #ffffff;
  --color-grey-200: var(--surface);
  --color-grey-300: #eae9e7;
  --color-grey-350: #d6d4cf;
  --color-features-animation-bg: #edecea;
  --color-grey-400: #c5c1ba;
  --color-grey-450: #9e9a95;
  --color-grey-500: var(--text-muted);
  --color-grey-600: #575450;
  --color-grey-800: var(--text);

  /* --- Dotted divider (SVG stroke-dasharray) --- */
  --divider-stroke-width: 1.2px;
  --divider-dash-length: .06px;
  --divider-dash-gap: 4px;
  --divider-color: var(--color-grey-450);
  --color-teal-250: var(--brand-hover);
  --color-brand-200: var(--brand);
  --font-families--geist-mono: var(--font-mono);
  --font-families--haskoy: var(--font-sans);
  --_type---eyebrow: var(--font-eyebrow-size);
  --_type---body: var(--font-body-size);
  --_type---h1: var(--font-h1-size);
  --_type---h2: var(--font-h2-size);
  --_type---h4: var(--font-meta-size);
  --space-section-y: var(--d-16);
  --content-max: var(--width-content);
}