/* ==========================================================================
   Phytosynth Botanics — Design Tokens
   ==========================================================================
   Bi-modal system: Conservatory (light) / Glasshouse (dark).
   Set mode with `data-mode="conservatory"` or `data-mode="glasshouse"` on <html>.
   Default: conservatory.
   ========================================================================== */

/* --- Fonts (Google Fonts CDN; self-host from fonts/ for production) -------- */

:root {
  /* -----------------------------------------------------------------------
     1. BRAND NEON (inherited from Synthminds)
     ----------------------------------------------------------------------- */
  --neon-teal:     #00EAD7;   /* Quantum Teal */
  --neon-violet:   #7F00FF;   /* Visionary Violet */
  --neon-magenta:  #E000FF;   /* Pulse Magenta */
  --midnight:      #100D23;   /* Glasshouse base */

  /* -----------------------------------------------------------------------
     2. CONSERVATORY NEUTRALS (warm, paper-linen)
     ----------------------------------------------------------------------- */
  --bone:          #F4EFE6;   /* primary light surface */
  --linen:         #EAE3D4;
  --mist:          #D6CFBE;
  --slate:         #6B6A63;
  --graphite:      #2A2A2A;
  --ink:           #141414;
  --paper:         #FFFFFF;

  /* -----------------------------------------------------------------------
     3. FOLIAGE ACCENTS (chlorophyll, used as grounding color)
     ----------------------------------------------------------------------- */
  --leaf-deep:     #2B5F3A;
  --leaf-velvet:   #0F3B2E;
  --leaf-variegation: #E8F4DE;

  /* -----------------------------------------------------------------------
     4. GRADIENT (teal → violet → magenta, 135°, cool-to-warm)
     ----------------------------------------------------------------------- */
  --gradient-brand: linear-gradient(135deg, var(--neon-teal) 0%, var(--neon-violet) 50%, var(--neon-magenta) 100%);
  --gradient-brand-soft: linear-gradient(135deg, color-mix(in oklch, var(--neon-teal) 60%, transparent) 0%, color-mix(in oklch, var(--neon-violet) 60%, transparent) 50%, color-mix(in oklch, var(--neon-magenta) 60%, transparent) 100%);
  --gradient-rim:   linear-gradient(90deg, var(--neon-teal), var(--neon-magenta));
  --gradient-radial-glow: radial-gradient(ellipse at center, color-mix(in oklch, var(--neon-violet) 35%, transparent) 0%, transparent 70%);

  /* -----------------------------------------------------------------------
     5. SEMANTIC — default to Conservatory (light) mode
     ----------------------------------------------------------------------- */
  --bg:            var(--bone);
  --bg-raised:     var(--paper);
  --bg-sunken:     var(--linen);

  --fg:            var(--graphite);
  --fg-muted:      var(--slate);
  --fg-subtle:     var(--mist);
  --fg-inverse:    var(--bone);

  --accent:        var(--leaf-deep);
  --accent-contrast: var(--paper);

  --border:        rgba(42, 42, 42, 0.10);
  --border-strong: rgba(42, 42, 42, 0.22);

  --rule:          rgba(107, 106, 99, 0.28);

  /* -----------------------------------------------------------------------
     6. SPACING (base 4)
     ----------------------------------------------------------------------- */
  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* Section padding (editorial rhythm) */
  --section-y-desktop: 96px;
  --section-y-mobile:  48px;

  /* -----------------------------------------------------------------------
     7. RADII
     ----------------------------------------------------------------------- */
  --r-0:    0;
  --r-sm:   2px;    /* cards, buttons */
  --r-md:   4px;    /* larger surfaces */
  --r-lg:   8px;    /* sparingly */
  --r-pill: 999px;  /* hero CTA only */

  /* -----------------------------------------------------------------------
     8. ELEVATION / SHADOW
     ----------------------------------------------------------------------- */
  /* Conservatory — we prefer hairline borders to shadows */
  --shadow-flat:    0 1px 0 rgba(42, 42, 42, 0.04);
  --shadow-card:    0 1px 2px rgba(42, 42, 42, 0.04), 0 8px 24px -16px rgba(42, 42, 42, 0.14);
  --shadow-float:   0 12px 40px -20px rgba(42, 42, 42, 0.18);

  /* Glasshouse — inner gradient glow instead of drop shadow */
  --glow-inner:     inset 0 0 0 1px rgba(0, 234, 215, 0.14), 0 0 40px -10px rgba(224, 0, 255, 0.25);
  --glow-inner-hover: inset 0 0 0 1px rgba(0, 234, 215, 0.28), 0 0 60px -10px rgba(224, 0, 255, 0.35);
  --glow-rim:       0 0 0 1px rgba(0, 234, 215, 0.40);

  /* -----------------------------------------------------------------------
     9. MOTION
     ----------------------------------------------------------------------- */
  --ease-leaf:     cubic-bezier(0.2, 0.7, 0.1, 1);   /* how a leaf unfurls */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);

  --dur-hover:     180ms;
  --dur-standard:  320ms;
  --dur-page:      600ms;
  --dur-flourish:  900ms;

  /* -----------------------------------------------------------------------
     10. TYPE FAMILIES
     ----------------------------------------------------------------------- */
  --font-display:   'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-signature: 'Ms Madi', 'Italiana', 'Apple Chancery', cursive;
  --font-italiana:  'Italiana', 'Didot', 'Bodoni 72', serif;
  --font-sans:      'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:      'JetBrains Mono', 'SF Mono', 'Menlo', monospace;

  /* -----------------------------------------------------------------------
     11. TYPE SIZES (web scale)
     ----------------------------------------------------------------------- */
  --fs-h1-display:  72px;   --lh-h1-display: 1.08;   --tr-h1-display: -0.02em;
  --fs-h1-cursive:  96px;   --lh-h1-cursive: 0.85;   --tr-h1-cursive: 0;
  --fs-h2:          48px;   --lh-h2:         1.12;   --tr-h2:         -0.015em;
  --fs-h3:          24px;   --lh-h3:         1.30;   --tr-h3:         -0.005em;
  --fs-eyebrow:     13px;   --lh-eyebrow:    1.55;   --tr-eyebrow:    0.10em;
  --fs-body:        16px;   --lh-body:       1.75;   --tr-body:       0;
  --fs-body-long:   18px;   --lh-body-long:  1.70;   --tr-body-long:  0.003em;
  --fs-tech:        12px;   --lh-tech:       1.70;   --tr-tech:       0.05em;
  --fs-caption:     12px;   --lh-caption:    1.50;   --tr-caption:    0.02em;

  /* -----------------------------------------------------------------------
     12. LAYOUT
     ----------------------------------------------------------------------- */
  --measure:       58ch;        /* max text column */
  --container-w:   1280px;
  --container-px:  clamp(24px, 4vw, 64px);
}

/* --- GLASSHOUSE (dark) MODE -------------------------------------------------*/
[data-mode="glasshouse"] {
  --bg:          var(--midnight);
  --bg-raised:   #181533;
  --bg-sunken:   #0A0818;

  --fg:          var(--bone);
  --fg-muted:    #9C98B4;
  --fg-subtle:   #5A567A;
  --fg-inverse:  var(--graphite);

  --accent:      var(--neon-teal);
  --accent-contrast: var(--midnight);

  --border:        rgba(244, 239, 230, 0.08);
  --border-strong: rgba(0, 234, 215, 0.28);

  --rule:          rgba(244, 239, 230, 0.16);
}

/* ==========================================================================
   SEMANTIC TYPE CLASSES
   ========================================================================== */

.t-h1-display {
  font-family: var(--font-display);
  font-weight: 380;
  font-size: var(--fs-h1-display);
  line-height: var(--lh-h1-display);
  letter-spacing: var(--tr-h1-display);
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
  text-wrap: balance;
  color: var(--fg);
}

.t-h1-cursive {
  font-family: var(--font-signature);
  font-weight: 400;
  font-size: var(--fs-h1-cursive);
  line-height: var(--lh-h1-cursive);
  letter-spacing: var(--tr-h1-cursive);
  color: var(--fg);
}

.t-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2);
  font-variation-settings: 'opsz' 144, 'SOFT' 80, 'WONK' 1;
  text-wrap: balance;
  color: var(--fg);
}

.t-h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tr-h3);
  color: var(--fg);
}

.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.t-eyebrow--mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  max-width: var(--measure);
  text-wrap: pretty;
}

.t-body-long {
  font-family: var(--font-display);
  font-weight: 380;
  font-size: var(--fs-body-long);
  line-height: var(--lh-body-long);
  letter-spacing: var(--tr-body-long);
  font-variation-settings: 'opsz' 14, 'SOFT' 50, 'WONK' 0;
  color: var(--fg);
  max-width: var(--measure);
  text-wrap: pretty;
}

.t-binomial {
  font-family: var(--font-italiana);
  font-style: italic;
  font-weight: 400;
  color: var(--fg);
}

.t-signature {
  font-family: var(--font-signature);
  font-weight: 400;
  color: var(--fg);
}

.t-tech {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-tech);
  line-height: var(--lh-tech);
  letter-spacing: var(--tr-tech);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.t-caption {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--tr-caption);
  color: var(--fg-muted);
}

/* ==========================================================================
   ATOMIC UTILITIES
   ========================================================================== */

.bg-gradient      { background: var(--gradient-brand); }
.bg-gradient-soft { background: var(--gradient-brand-soft); }
.fg-gradient {
  background: var(--gradient-brand);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.rule-gradient {
  height: 1px;
  width: 100%;
  background: var(--gradient-rim);
  border: 0;
}

/* Terminal-style eyebrow: //  TEXT */
.eyebrow-term::before {
  content: '// ';
  color: var(--neon-teal);
  font-weight: 600;
}

/* ==========================================================================
   BASE RESET + DEFAULTS
   ========================================================================== */

* { box-sizing: border-box; }

html {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; }
p { margin: 0; }

a {
  color: inherit;
  text-decoration: none;
  position: relative;
  transition: color var(--dur-hover) var(--ease-leaf);
}
a:hover { color: var(--accent); }

em, i { font-style: italic; }

/* Selection — neon-touched but readable */
::selection {
  background: color-mix(in oklch, var(--neon-magenta) 35%, transparent);
  color: var(--fg);
}