/* ============================================================
   SNAPPY DESIGN SYSTEM — colors & type
   Extracted from v0-snappy-website-0c/app/globals.css
   Source of truth: the default "Claude" theme (clean warm)
   ============================================================ */

/* ---- Fonts (Google Fonts — same as production) ------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---- Base colors (light / default "Claude" theme) -------
     All in oklch — warm neutral background, terracotta primary */
  --background: oklch(0.9818 0.0054 95.0986);      /* fg1 canvas — warm paper */
  --foreground: oklch(0.3438 0.0269 95.7226);      /* fg1 text  — deep warm */
  --card: oklch(0.9818 0.0054 95.0986);
  --card-foreground: oklch(0.1908 0.002 106.5859);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.2671 0.0196 98.939);

  /* Terracotta / clay — Snappy's signature accent */
  --primary: oklch(0.6171 0.1375 39.0427);
  --primary-foreground: oklch(1 0 0);

  --secondary: oklch(0.9245 0.0138 92.9892);
  --secondary-foreground: oklch(0.4334 0.0177 98.6048);
  --muted: oklch(0.9341 0.0153 90.239);
  --muted-foreground: oklch(0.5059 0.0175 97.4233);
  --accent: oklch(0.9245 0.0138 92.9892);
  --accent-foreground: oklch(0.2671 0.0196 98.939);

  --destructive: oklch(0.5347 0.2209 27.3253);
  --destructive-foreground: oklch(1 0 0);
  --success:     oklch(0.55 0.18 145);
  --success-foreground: oklch(1 0 0);
  --warning:     oklch(0.75 0.15 85);
  --warning-foreground: oklch(0.25 0.05 85);
  --info:        oklch(0.55 0.18 241);
  --info-foreground: oklch(1 0 0);

  --border: oklch(0.8847 0.0069 97.3627);
  --input:  oklch(0.7621 0.0156 98.3528);
  --ring:   oklch(0.6171 0.1375 39.0427);

  /* Chart palette — warm terracotta ramp */
  --chart-1: oklch(0.6171 0.1375 39.0427);
  --chart-2: oklch(0.5856 0.1145 36.1484);
  --chart-3: oklch(0.552  0.0949 32.6866);
  --chart-4: oklch(0.6536 0.1443 42.9152);
  --chart-5: oklch(0.6865 0.147  44.0821);

  /* Sidebar — slightly warmer than canvas */
  --sidebar: oklch(0.9586 0.0068 97.4127);
  --sidebar-foreground: oklch(0.3438 0.0269 95.7226);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.9245 0.0138 92.9892);
  --sidebar-accent-foreground: oklch(0.2671 0.0196 98.939);
  --sidebar-border: oklch(0.8847 0.0069 97.3627);
  --sidebar-ring: var(--primary);

  /* Shape & elevation */
  --radius: 0.5rem;                                   /* 8px base; xl = 12px */
  --radius-xs: calc(var(--radius) - 6px);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --shadow-2xs: 0 1px 2px 0px hsl(0 0% 0% / 0.08);
  --shadow-xs:  0 1px 3px 0px hsl(0 0% 0% / 0.12);
  --shadow-sm:  0 2px 4px 0px hsl(0 0% 0% / 0.08), 0 1px 2px -1px hsl(0 0% 0% / 0.08);
  --shadow:     0 2px 8px 0px hsl(0 0% 0% / 0.10), 0 1px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-md:  0 4px 12px -2px hsl(0 0% 0% / 0.12), 0 2px 6px -2px hsl(0 0% 0% / 0.08);
  --shadow-lg:  0 12px 24px -4px hsl(0 0% 0% / 0.12), 0 4px 8px -4px hsl(0 0% 0% / 0.08);
  --shadow-xl:  0 20px 32px -8px hsl(0 0% 0% / 0.14), 0 8px 16px -8px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0 32px 64px -12px hsl(0 0% 0% / 0.18);

  /* Spacing tokens (from THEME_SYSTEM) */
  --spacing-compact: 0.5rem;   /* 8  */
  --spacing-standard: 1rem;    /* 16 */
  --spacing-spacious: 1.5rem;  /* 24 */

  /* Type stacks */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-display: var(--font-sans);
  --font-text:    var(--font-sans);

  /* Type scale (px @ 1.0 root)
     Pulled from utility usage: text-xs 12, sm 14, base 16, lg 18, xl 20,
     2xl 24, 3xl 30, 4xl 36, 5xl 48 */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  /* Semantic typography — matches homepage usage */
  --h1-size: clamp(1.875rem, 2vw + 1rem, 3rem);    /* hero headline */
  --h1-weight: 600;
  --h1-tracking: -0.02em;
  --h1-leading: 1.1;

  --h2-size: clamp(1.5rem, 1vw + 1rem, 2.25rem);   /* section heading */
  --h2-weight: 600;
  --h2-tracking: -0.01em;
  --h2-leading: 1.15;

  --h3-size: 1.5rem;
  --h3-weight: 600;
  --h3-leading: 1.2;

  --eyebrow-size: 0.875rem;
  --eyebrow-weight: 500;
  --eyebrow-tracking: 0.08em;
  --eyebrow-transform: uppercase;
  --eyebrow-color: var(--muted-foreground);

  --body-size: 1rem;
  --body-leading: 1.6;
  --body-color: var(--foreground);

  --lead-size: 1.125rem;
  --lead-leading: 1.6;
  --lead-color: var(--muted-foreground);

  --small-size: 0.875rem;
  --small-color: var(--muted-foreground);

  --code-size: 0.875rem;
  --code-family: var(--font-mono);
}

/* ---- Dark theme (applied via .dark on html) ---------------- */
.dark {
  --background: oklch(0.2679 0.0036 106.6427);
  --foreground: oklch(0.8574 0.0142 93.0137);
  --card: oklch(0.2679 0.0036 106.6427);
  --card-foreground: oklch(0.9818 0.0054 95.0986);
  --popover: oklch(0.3085 0.0035 106.6039);
  --popover-foreground: oklch(0.9211 0.004 106.4781);

  --primary: oklch(0.6724 0.1308 38.7559);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.3589 0.0056 106.5989);
  --secondary-foreground: oklch(0.9085 0.0035 106.6039);
  --muted: oklch(0.3213 0.0038 106.707);
  --muted-foreground: oklch(0.7213 0.0169 99.0657);
  --accent: oklch(0.313 0.0078 95.4245);
  --accent-foreground: oklch(0.9663 0.008 98.8792);

  --destructive: oklch(0.5847 0.2209 27.3253);
  --destructive-foreground: oklch(1 0 0);

  --border: oklch(0.4118 0.0101 106.8928);
  --input: oklch(0.4336 0.0113 100.2195);
  --ring:  oklch(0.6724 0.1308 38.7559);

  --chart-1: oklch(0.6724 0.1308 38.7559);
  --chart-2: oklch(0.6356 0.1063 35.1484);
  --chart-3: oklch(0.6032 0.0865 32.6866);
  --chart-4: oklch(0.7036 0.1349 42.9152);
  --chart-5: oklch(0.7365 0.137  44.0821);

  --sidebar: oklch(0.3085 0.0035 106.6039);
  --sidebar-foreground: oklch(0.9211 0.004 106.4781);
  --sidebar-border: oklch(0.3618 0.0101 106.8928);
}

/* ============================================================
   Semantic typography helpers
   ============================================================ */
body, .body {
  font-family: var(--font-text);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  color: var(--body-color);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  letter-spacing: var(--h1-tracking);
  line-height: var(--h1-leading);
  color: var(--foreground);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  letter-spacing: var(--h2-tracking);
  line-height: var(--h2-leading);
  color: var(--foreground);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-leading);
  color: var(--foreground);
}

.eyebrow {
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: var(--eyebrow-transform);
  color: var(--eyebrow-color);
}

.lead {
  font-size: var(--lead-size);
  line-height: var(--lead-leading);
  color: var(--lead-color);
}

small, .small {
  font-size: var(--small-size);
  color: var(--small-color);
}

code, kbd, pre, .mono {
  font-family: var(--code-family);
  font-size: var(--code-size);
}