/* Jamaica Smart Home — Design Tokens
   Source: tokens.jsx from Claude Design handoff.
   Direction B (Caribbean Modern) is the default / fallback.
   Preset files override only the semantic tokens listed below.
*/

:root {
  /* ── Palette ───────────────────────────────────────────── */
  --jsh-cream:        #F5F1E6;
  --jsh-cream-soft:   #ECE5D2;
  --jsh-cream-warm:   #E4DAC0;
  --jsh-paper:        #FBF8F0;
  --jsh-ink:          #0E1A14;
  --jsh-ink-soft:     #2A2E29;

  --jsh-forest:       #103A2E;
  --jsh-forest-dark:  #0A2A20;
  --jsh-forest-deep:  #06160F;
  --jsh-forest-mid:   #1E5A47;
  --jsh-forest-soft:  #2E7558;

  --jsh-mint:         #4FE3C1;
  --jsh-teal:         #2BB397;
  --jsh-teal-dark:    #0F8870;

  --jsh-gold:         #D6A24A;
  --jsh-gold-soft:    #E8C273;
  --jsh-gold-deep:    #A87A2A;

  --jsh-warn:         #E97142;

  /* ── Typography ────────────────────────────────────────── */
  --jsh-font-display: 'Instrument Serif', Georgia, serif;
  --jsh-font-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --jsh-font-mono:    'JetBrains Mono', 'Menlo', monospace;

  /* ── Semantic — overridden by preset files ─────────────── */
  --jsh-bg:           var(--jsh-cream);
  --jsh-bg-alt:       var(--jsh-forest);
  --jsh-surface:      var(--jsh-paper);
  --jsh-surface-2:    var(--jsh-cream-soft);
  --jsh-border:       var(--jsh-cream-warm);
  --jsh-border-strong: rgba(0,0,0,0.12);

  --jsh-text:         var(--jsh-ink);
  --jsh-text-soft:    var(--jsh-ink-soft);
  --jsh-text-dim:     #5b5b54;

  --jsh-accent:       var(--jsh-forest);
  --jsh-accent-dark:  var(--jsh-forest-dark);
  --jsh-accent-fg:    var(--jsh-cream);

  --jsh-signal:       var(--jsh-mint);
  --jsh-signal-text:  var(--jsh-forest-deep);

  --jsh-gold-accent:  var(--jsh-gold);

  /* ── Hero typography scale ─────────────────────────────── */
  --jsh-hero-size:    clamp(56px, 10vw, 140px);
  --jsh-hero-line:    0.92;

  /* ── Spacing ───────────────────────────────────────────── */
  --jsh-pad-x:        clamp(20px, 5vw, 80px);
  --jsh-pad-section:  clamp(64px, 8vw, 120px);
  --jsh-radius:       8px;
  --jsh-radius-pill:  999px;

  /* ── Transitions ───────────────────────────────────────── */
  --jsh-ease:         cubic-bezier(0.25, 0, 0, 1);
  --jsh-duration:     200ms;

  /* ── Business config (overridden by Customizer inline CSS) */
  --jsh-usd-rate:     156;
}