/* ═══════════════════════════════════════════════════════════════════════
   SetForth Design System — Colors & Type
   Source of truth: apps/web/src/app/globals.css (production)
   Cross-checked: brand-exploration/brand-identity.html
   ═══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("./fonts/PlusJakartaSans-VariableFont_wght.ttf") format("truetype-variations"),
       url("./fonts/PlusJakartaSans-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── BRAND ACCENTS ─────────────────────────────────────────── */
  --peach:              #f5812d;   /* primary brand color */
  --peach-light:        #f6a966;
  --peach-subtle:       #fee4ca;
  --peach-text:         #aa4a10;   /* foreground on peach-subtle */

  --blush:              #f0687c;
  --blush-light:        #f59eaa;
  --blush-subtle:       #fee1e5;
  --blush-text:         #a92842;

  --sage:               #58c864;   /* success / complete */
  --sage-light:         #a2e0a5;
  --sage-subtle:        #def6df;
  --sage-text:          #347f3a;

  --lavender:           #9b73e8;   /* review / decisions */
  --lavender-light:     #bda5ef;
  --lavender-subtle:    #ece5fa;
  --lavender-text:      #6040a0;

  --amber:              #eba211;
  --amber-light:        #f1c14f;
  --sand:               #f0dcc8;
  --sand-light:         #f5e6d3;

  /* ── WARM NEUTRALS (warm-shifted, never cool gray) ─────────── */
  --warm-50:            #faf6f1;
  --warm-100:           #f0e8de;
  --warm-200:           #e4d8ca;
  --warm-300:           #cabaa6;
  --warm-400:           #a89580;
  --warm-500:           #8a7e76;
  --warm-600:           #6b5f56;
  --warm-700:           #4a403a;
  --warm-800:           #332c28;
  --warm-900:           #2a2320;

  /* ── SEMANTIC TOKENS — LIGHT ───────────────────────────────── */
  --background:         #fbf7f2;   /* cream — page background */
  --foreground:         #1a1614;   /* primary text */
  --card:               #ffffff;
  --card-foreground:    #1a1614;
  --popover:            #ffffff;
  --popover-foreground: #1a1614;

  --primary:            #f5812d;   /* peach */
  --primary-foreground: #ffffff;
  --secondary:          #f0e8de;   /* warm-100 */
  --secondary-foreground: #4a403a;
  --muted:              #f0e8de;
  --muted-foreground:   #6b5f56;
  --accent:             #fee4ca;   /* peach-subtle */
  --accent-foreground:  #4a403a;
  --destructive:        #f0687c;
  --destructive-foreground: #ffffff;
  --destructive-text:   #b92443;

  --border:             #f0e8de;
  --input:              #f0e8de;
  --ring:               #f5812d;

  /* ── TYPOGRAPHY ────────────────────────────────────────────── */
  --font-sans:          "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display:       "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:          ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (matches brand-identity.html specimens) */
  --text-display-xl:    64px;   /* 800 / -0.04em */
  --text-display-lg:    48px;   /* 700 / -0.03em */
  --text-h1:            32px;   /* 700 / -0.02em */
  --text-h2:            24px;   /* 600 / -0.02em */
  --text-h3:            18px;   /* 600 / -0.01em */
  --text-body-lg:       18px;   /* 400 / 1.7    */
  --text-body:          15px;   /* 400 / 1.6    */
  --text-body-sm:       13px;   /* 400 / 1.5    */
  --text-caption:       11px;   /* 500 / 1.4 / 0.1em uppercase */

  /* ── SPACING (4px base) ────────────────────────────────────── */
  --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;

  /* ── RADII ─────────────────────────────────────────────────── */
  --radius:           10px;
  --radius-sm:        6px;
  --radius-md:        10px;
  --radius-lg:        16px;
  --radius-xl:        24px;
  --radius-full:      9999px;

  /* ── SHADOWS (warm-tinted, never neutral) ──────────────────── */
  --shadow-xs: 0 1px 2px rgba(42, 35, 32, 0.04);
  --shadow-sm: 0 1px 3px rgba(42, 35, 32, 0.06), 0 1px 2px rgba(42, 35, 32, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(42, 35, 32, 0.06), 0 2px 4px -2px rgba(42, 35, 32, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(42, 35, 32, 0.06), 0 4px 6px -4px rgba(42, 35, 32, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(42, 35, 32, 0.08), 0 8px 10px -6px rgba(42, 35, 32, 0.04);

  /* ── SIGNATURE GRADIENTS ───────────────────────────────────── */
  --gradient-warm-glow:   linear-gradient(135deg, var(--peach-subtle) 0%, var(--blush-subtle) 100%);
  --gradient-accent:      linear-gradient(135deg, var(--peach) 0%, var(--blush) 100%);
  --gradient-sunset:      linear-gradient(135deg, var(--peach-light) 0%, var(--blush-light) 50%, var(--lavender-light) 100%);
  --gradient-sand:        linear-gradient(135deg, var(--warm-50) 0%, var(--sand-light) 100%);
  --gradient-mist:        linear-gradient(135deg, var(--sage-subtle) 0%, var(--lavender-subtle) 100%);
  --gradient-canvas:      linear-gradient(160deg, var(--card) 0%, var(--peach-subtle) 40%, var(--lavender-subtle) 100%);
  --gradient-top-border:  linear-gradient(90deg, var(--peach), var(--blush), var(--lavender));
}

/* ── DARK MODE (.dark on <html> or any ancestor) ───────────────── */
.dark {
  --peach:              #f78b35;
  --peach-light:        #c65512;
  --peach-subtle:       #46250f;
  --peach-text:         #f78b35;

  --blush:              #f57588;
  --blush-light:        #b92946;
  --blush-subtle:       #471b24;
  --blush-text:         #f57588;

  --sage:               #64d978;
  --sage-light:         #2d8435;
  --sage-subtle:        #1a351f;
  --sage-text:          #64d978;

  --lavender:           #c4adff;
  --lavender-light:     #6b4fbd;
  --lavender-subtle:    #31245a;
  --lavender-text:      #c4adff;

  --amber:              #f6b926;
  --sand:               #5c4a38;
  --sand-light:         #4a3c30;

  --warm-50:            #242018;
  --warm-100:           #2e2820;
  --warm-200:           #3a3228;
  --warm-300:           #504638;
  --warm-400:           #6a5e50;
  --warm-500:           #8a7e70;
  --warm-600:           #a89888;
  --warm-700:           #c4b8a8;
  --warm-800:           #ddd4c8;
  --warm-900:           #f0eae2;

  --background:         #1a1714;
  --foreground:         #f8f4ee;
  --card:               #201c18;
  --card-foreground:    #f8f4ee;
  --popover:            #262220;
  --popover-foreground: #f8f4ee;

  --primary:            #f78b35;
  --primary-foreground: #ffffff;
  --secondary:          #2e2820;
  --secondary-foreground: #c4b8a8;
  --muted:              #2e2820;
  --muted-foreground:   #a89888;
  --accent:             #46250f;
  --accent-foreground:  #c4b8a8;
  --destructive:        #f57588;
  --destructive-foreground: #ffffff;
  --destructive-text:   #f57588;

  --border:             #3a3228;
  --input:              #3a3228;
  --ring:               #f78b35;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════
   SEMANTIC ELEMENT STYLES — drop in <link rel="stylesheet"> and write
   semantic HTML (<h1>, <p>, <button>) and it just looks right.
   ═══════════════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--foreground);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--foreground);
  text-wrap: balance;
}

h1 { font-size: var(--text-h1);    font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
h2 { font-size: var(--text-h2);    font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
h3 { font-size: var(--text-h3);    font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; }
h4 { font-size: 16px;              font-weight: 600; letter-spacing: -0.01em; line-height: 1.5; }

.display-xl { font-size: var(--text-display-xl); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.display-lg { font-size: var(--text-display-lg); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }

p           { font-size: var(--text-body); line-height: 1.6; color: var(--foreground); text-wrap: pretty; }
.body-lg    { font-size: var(--text-body-lg); line-height: 1.7; }
.body-sm    { font-size: var(--text-body-sm); line-height: 1.5; color: var(--muted-foreground); }
.caption    { font-size: var(--text-caption); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); }

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

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--peach-subtle); color: var(--peach-text); }