/* ==========================================================================
   Scale Mint — Design tokens
   Mirrored from the Claude design system project
   "Scale Mint Media Design System" (1057d491-bc7f-4432-b66d-55e7ce1ecac1).
   Do not hand-edit values here without updating the design system.
   ========================================================================== */

/* ---- Webfonts -----------------------------------------------------------
   SUBSTITUTION: no brand font files were provided. Space Grotesk (display) +
   Manrope (text/UI) + JetBrains Mono (code). Replace when licensed brand
   fonts exist. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---- Mint (primary brand) ---- */
  --mint-50: #E9FBF4;
  --mint-100: #C9F5E5;
  --mint-200: #97ECD0;
  --mint-300: #5FDCB6;
  --mint-400: #2FC79C;
  --mint-500: #14B08A; /* primary */
  --mint-600: #0E9576;
  --mint-700: #0B7862;
  --mint-800: #0A5E4E;
  --mint-900: #084C40;

  /* ---- Ink (charcoal neutrals, slightly green-cool) ---- */
  --ink-950: #0A0F0E;
  --ink-900: #0E1613;
  --ink-800: #16211D;
  --ink-700: #223029;
  --ink-600: #3A4A43;
  --ink-500: #5C6B64;
  --ink-400: #8A9791;
  --ink-300: #B7C1BC;
  --ink-200: #DDE4E1;
  --ink-100: #EEF2F0;
  --ink-50:  #F6F9F7;
  --white:   #FFFFFF;

  /* ---- Coral (warm CTA accent — primary CTA only) ---- */
  --coral-300: #FFB49E;
  --coral-400: #FF8B6B;
  --coral-500: #FF6B4A;
  --coral-600: #F04E29;
  --coral-700: #C93B1C;

  /* ---- Semantic status ---- */
  --success-500: #14B08A;
  --warning-500: #F5A623;
  --error-500:   #E5484D;
  --info-500:    #3B9BD8;

  /* ---- Semantic aliases (use these in product code) ---- */
  --brand: var(--mint-500);
  --brand-strong: var(--mint-600);
  --brand-soft: var(--mint-50);
  --cta: var(--coral-500);
  --cta-strong: var(--coral-600);

  --text-strong: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-on-brand: var(--white);
  --text-on-dark: var(--ink-50);
  --text-on-dark-muted: var(--ink-300);

  --surface-page: var(--white);
  --surface-subtle: var(--ink-50);
  --surface-card: var(--white);
  --surface-dark: var(--ink-900);
  --surface-dark-2: var(--ink-800);

  --border-subtle: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-on-dark: rgba(255, 255, 255, 0.10);

  --focus-ring: rgba(20, 176, 138, 0.45);

  /* ---- Typography ---- */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-text: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --fs-display: 4rem;
  --fs-h1: 3rem;
  --fs-h2: 2.25rem;
  --fs-h3: 1.625rem;
  --fs-h4: 1.25rem;
  --fs-lead: 1.25rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.6;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-eyebrow: 0.12em;

  /* ---- Spacing & layout (4px base grid) ---- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --container-max: 1200px;
  --container-narrow: 760px;
  --section-py: clamp(4rem, 8vw, 8rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---- Radii ---- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-xs: 0 1px 2px rgba(14, 22, 19, 0.06);
  --shadow-sm: 0 2px 8px rgba(14, 22, 19, 0.06), 0 1px 2px rgba(14, 22, 19, 0.04);
  --shadow-md: 0 8px 24px rgba(14, 22, 19, 0.08), 0 2px 6px rgba(14, 22, 19, 0.05);
  --shadow-lg: 0 18px 48px rgba(14, 22, 19, 0.12), 0 4px 12px rgba(14, 22, 19, 0.06);
  --shadow-xl: 0 32px 80px rgba(14, 22, 19, 0.16);
  --shadow-mint: 0 10px 30px rgba(20, 176, 138, 0.28);
  --shadow-coral: 0 10px 28px rgba(255, 107, 74, 0.32);
  --ring-focus: 0 0 0 4px var(--focus-ring);

  /* ---- Motion ---- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
  --dur-reveal: 600ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --hover-lift: -3px;
  --press-scale: 0.98;
}

/* ==========================================================================
   Dark mode — the system is light-first with dark bands. In dark mode the
   page surface takes the dark-band role and the neutrals invert. Brand,
   CTA and radii are unchanged so the identity holds across both.
   ========================================================================== */
[data-theme='dark'] {
  --text-strong: var(--white);
  --text-body: var(--ink-200);
  --text-muted: var(--ink-400);

  --surface-page: var(--ink-950);
  --surface-subtle: var(--ink-900);
  --surface-card: var(--ink-800);
  --surface-dark: #06100D;
  --surface-dark-2: var(--ink-900);

  --border-subtle: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);

  --brand-soft: rgba(20, 176, 138, 0.14);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.6);
}