/* Design tokens (Figma variables, checked against Design System frame 480:3270).
   Order: palette, semantic colours, type, spacing, layout, shape, motion, shared component tokens,
   then per-section tokens (prefixed with the section name). Spacing/radius/shadow are measured from frames. */
:root {
  /* Palette */
  --orange-400: #ff8904;
  --orange-500: #ff6900;
  --orange-700: #ca3500;
  --orange-900: #7e2a0c;
  --amber-600: #e17100;
  --amber-800: #973c00;
  --amber-950: #461901;
  --yellow-400: #fdc700;
  --yellow-500: #f0b100;
  --stone-50: #fafaf9;
  --stone-100: #f5f5f4;
  --stone-300: #d6d3d1;
  --emerald-300: #5ee9b5;
  --emerald-500: #00bc7d;
  --emerald-600: #009966;
  --lime-400: #9ae600;
  --cyan-600: #0092b8;
  --blue-500: #2b7fff;
  --green-600: #00a63e;
  --red-500: #fb2c36;
  --neutral-900: #171717;
  --peach-100: #ffe4d2;
  --cream-100: #f3efd9;
  --sage-100: #e3f1e2;
  --apricot-100: #ffeac8;

  /* Semantic: text */
  --text-strong: #0a0a0a;
  --text-medium: rgb(0 0 0 / 0.7);
  --text-low: rgb(0 0 0 / 0.6);
  --text-weak: #d4d4d4;
  --text-brand: var(--emerald-600);
  --text-negative: #ffffff;

  /* Semantic: surfaces */
  --base-high: #ffffff;
  --base-medium: #f5f5f5;
  --base-low: #e5e5e5;
  --base-negative: #0a0a0a;
  --base-brand: var(--emerald-500);

  /* Semantic: borders */
  --border-strong: #a1a1a1;
  --border-thin: rgb(0 0 0 / 0.1);
  --border-solid: #000000;

  /* Transparent */
  --black-5: rgb(0 0 0 / 0.05);
  --black-10: rgb(0 0 0 / 0.1);
  --black-60: rgb(0 0 0 / 0.6);
  --black-90: rgb(0 0 0 / 0.9);
  --white-10: rgb(255 255 255 / 0.1);

  /* Roles */
  --btn-dark: var(--amber-950);
  --accent: var(--orange-500);
  --footer-bg: var(--amber-950);

  /* Fonts */
  --font-heading: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-heading: var(--fw-semibold); /* ClickUp sets display type at 650-700; 600 is the heaviest weight loaded */

  /* Type scale from clickup.com (display-* and text-* tokens). size / line-height / tracking.
     Mobile values here, desktop at 1024+ below (ClickUp switches at 900). Mobile h4 and h5 sit between
     ClickUp's display-sm (26) and display-xs (18), which have no step of their own there. */
  --h1-size: 40px; --h1-lh: 48px; --h1-ls: -1.6px;
  --h2-size: 34px; --h2-lh: 41px; --h2-ls: -1.6px;
  --h3-size: 26px; --h3-lh: 33px; --h3-ls: -0.91px;
  --h4-size: 22px; --h4-lh: 28px; --h4-ls: -0.77px;
  --h5-size: 20px; --h5-lh: 26px; --h5-ls: -0.6px;
  --h6-size: 18px; --h6-lh: 24px; --h6-ls: -0.54px;
  --body-lg-size: 18px; --body-lg-lh: 24px; --body-lg-ls: -0.25px;
  --body-md-size: 16px; --body-md-lh: 22px; --body-md-ls: -0.32px;
  --body-sm-size: 14px; --body-sm-lh: 20px; --body-sm-ls: -0.15px;
  --para-lg-size: 18px; --para-lg-lh: 24px; --para-lg-ls: -0.25px;
  --para-md-size: 16px; --para-md-lh: 22px; --para-md-ls: -0.32px;
  --para-sm-size: 14px; --para-sm-lh: 20px; --para-sm-ls: -0.15px;

  /* Spacing (4px scale) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --section-y: 56px;

  /* Layout */
  --container: 1200px;
  --gutter: 16px;
  --header-h: 64px;

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-md: 0 8px 24px rgb(0 0 0 / 0.08);
  --shadow-lg: 0 24px 56px rgb(0 0 0 / 0.12);

  /* Motion (hover/press use --dur + --ease; entrances use css/motion.css + js/motion.js) */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur: 200ms;
  --dur-slow: 400ms;
  --dur-reveal: 700ms;
  --dur-reveal-img: 1000ms;
  --reveal-distance: 24px;
  --reveal-stagger: 80ms;
}
@media (min-width: 768px) {
  :root { --gutter: 24px; --section-y: 64px; }
}
@media (min-width: 1024px) {
  :root {
    --gutter: 32px;
    --section-y: 80px;
    --h1-size: 60px; --h1-lh: 66px; --h1-ls: -2.1px;
    --h2-size: 48px; --h2-lh: 55px; --h2-ls: -1.68px;
    --h3-size: 40px; --h3-lh: 48px; --h3-ls: -1.6px;
    --h4-size: 34px; --h4-lh: 41px; --h4-ls: -1.6px;
    --h5-size: 26px; --h5-lh: 33px; --h5-ls: -0.91px;
    --h6-size: 18px; --h6-lh: 24px; --h6-ls: -0.54px;
  }
}
/* added by footer */
:root {
  --footer-accent: #edeac6;
  --footer-field: rgb(255 255 255 / 0.06);
}
/* added by pricing */
:root {
  --pricing-accent: #db770c;
  --pricing-chip: #edeae8;
  --pricing-line: #e4e4e7;
  --pricing-switch-border: rgb(74 30 6 / 0.15);
}

/* added by agents */
:root {
  --mint-100: #cdfcdd;
  --sand-100: #f2e9d5;
  --green-500: #00c950;
}
/* added by features */
:root {
  --features-tag: #d2fccd;
  --features-dot: #4a1e06;
  --features-term: #09090b;
  --features-term-ok: #31ffba;
  --features-chat-bubble: rgb(27 241 7 / 0.2);
}

/* added by navbar */
:root {
  --font-logo: "General Sans", var(--font-body);
  --logo-size: 29px;
  --shadow-nav: 0 12px 12px rgb(18 46 61 / 0.04);
  --shadow-nav-scrolled: 0 12px 24px rgb(18 46 61 / 0.1);
}

/* added by hero */
:root {
  --yellow-600: #d08700;
  --hero-grad-top: rgb(255 113 0 / 0.15);
  --hero-grad-mid: rgb(153 255 0 / 0.09);
  --btn-emboss-ring: #b18b78;
  --btn-emboss-glow: rgb(123 82 60 / 0.7);
  --btn-emboss-divider: rgb(255 255 255 / 0.2);
  --btn-soft-ring: rgb(153 153 153 / 0.4);
  --btn-soft-inner: rgb(153 153 153 / 0.1);
  --white-40: rgb(255 255 255 / 0.4);
  --black-4: rgb(0 0 0 / 0.04);
  --shadow-badge: 0 12px 4px rgb(0 0 0 / 0.03);
  --shadow-cta: 0 12px 10px rgb(0 0 0 / 0.08);
}

/* Shared component tokens (T18) */
:root {
  --black-6: rgb(0 0 0 / 0.06);
  --tint-brown-10: rgb(74 30 6 / 0.1);
  --focus-ring: rgb(151 60 0 / 0.15);
  --callout-bg: #f5f2f0;
  --status-progress: #a4f4cf;
  --status-progress-text: #004f3b;
  --status-rejected: #ffc9c9;
  --status-rejected-text: #9f0712;
  --docs-header-bg: #f5f5f5;
  --code-bg: #0a0a0a;
  --code-text: #e5e5e5;
  --code-muted: #737373;
}