/*
 * Nui Hale Operations Design Tokens
 * Single source of truth for color, type, spacing, and visual language.
 * Warm Hawaiian palette — beige backgrounds, koa wood cards, olive green accents.
 * "Built from the islands, for the islands."
 *
 * Consumers: site.css (marketing), app.css (dashboard), inline layouts.
 * Default: warm Hawaiian light theme. Marketing pages use body.marketing for dark.
 */

/* ─── GOOGLE FONTS ─────────────────────────────────────────────────────────── */
/*
 * Heading: Fraunces — editorial serif, warmth and presence without kitschy
 * Body:    Satoshi — clean grotesque, pairs perfectly, high readability
 * Mono:    JetBrains Mono — code/data contexts
 *
 * Load order matters: preconnect first, then stylesheet.
 * These @import declarations are referenced by layout templates.
 */

:root {
  /* ─── CORE PALETTE: Warm Hawaiian — beige backgrounds, koa wood cards ─── */
  --color-void:       #f5f0e8;   /* Warm beige — page background base */
  --color-depth:      #efe8dc;   /* Slightly deeper beige — section backgrounds */
  --color-abyss:      #3b2314;   /* Deep koa brown — sidebar, nav backgrounds */
  --color-reef:       #5C3317;   /* Koa wood — card / panel backgrounds */
  --color-lagoon:     #6d4023;   /* Warm koa/lagoon — elevated panels, hover */
  --color-foam:       #d4c4ae;   /* Sand/foam — form inputs, chips, subtle elements */

  /* ─── CORE PALETTE: Volcanic Dark (reserved) ──────────────────────────── */
  --color-lava:       #1a0e0a;
  --color-obsidian:   #13100d;

  /* ─── ACCENT: Muted Olive Green — primary interactive color ───────────── */
  --color-teal:       #4a6b35;   /* Primary accent — olive green */
  --color-teal-bright:#5a7b42;   /* Hover/emphasis state */
  --color-teal-dim:   rgba(74, 107, 53, 0.12);
  --color-teal-glow:  rgba(74, 107, 53, 0.08);
  --color-teal-border:rgba(74, 107, 53, 0.25);
  --color-teal-shadow:rgba(74, 107, 53, 0.15);

  /* ─── ACCENT: Coral / Lava Red ──────────────────────────────────────────── */
  --color-coral:      #c4503b;   /* Alert, warning, destructive */
  --color-coral-dim:  rgba(196, 80, 59, 0.12);
  --color-coral-border:rgba(196, 80, 59, 0.28);

  /* ─── ACCENT: Sand / Warm Gold ─────────────────────────────────────────── */
  --color-sand:       #8a6420;   /* Warm gold — highlights, premium feel */
  --color-sand-dim:   rgba(138, 100, 32, 0.15);
  --color-sand-border:rgba(138, 100, 32, 0.28);

  /* ─── ACCENT: Fern Green ───────────────────────────────────────────────── */
  --color-fern:       #2b6e3f;   /* Success — deep tropical fern green */
  --color-fern-dim:   rgba(43, 110, 63, 0.12);
  --color-fern-border:rgba(43, 110, 63, 0.28);

  /* ─── ACCENT: Sky Indigo ───────────────────────────────────────────────── */
  --color-sky:        #5ea8f0;   /* Info / filed states */
  --color-sky-dim:    rgba(94, 168, 240, 0.12);

  /* ─── TEXT ─────────────────────────────────────────────────────────────── */
  --color-text-primary:  #2d1f14;   /* Main body text — dark earth brown */
  --color-text-secondary:#3b2a1a;   /* Secondary — slightly lighter earth */
  --color-text-muted:    #6b5a48;   /* Captions, labels, placeholders */
  --color-text-bright:   #1a0f08;   /* High emphasis — near-black warm */
  --color-text-inverse:  #f5f0e8;   /* Text on dark/wood backgrounds */

  /* ─── SURFACE / BORDERS ─────────────────────────────────────────────────── */
  --color-border-subtle:  #d4c4ae;   /* Warm tan — visible subtle border */
  --color-border-dim:     #c4b194;   /* Slightly darker tan */
  --color-border-accent:  rgba(74, 107, 53, 0.25);
  --color-overlay:        rgba(60, 35, 15, 0.35);

  /* ─── SEMANTIC (UI states) ─────────────────────────────────────────────── */
  --color-success:    var(--color-fern);
  --color-warning:    var(--color-sand);
  --color-danger:     var(--color-coral);
  --color-info:       var(--color-sky);

  /* ─── LEGACY ALIASES ─────────────────────────────────────────────────────
   * Maps old variable names to the warm Hawaiian palette.
   * Existing site.css / app.css continues to work.
   */
  --ink:       var(--color-void);
  --surface:   var(--color-depth);
  --panel:     var(--color-reef);
  --ridge:     var(--color-lagoon);
  --teal:      var(--color-teal);
  --teal-glow: var(--color-teal-dim);
  --amber:     var(--color-sand);
  --amber-glow:var(--color-sand-dim);
  --coral:     var(--color-coral);
  --text:      var(--color-text-secondary);
  --bright:    var(--color-text-bright);
  --white:     var(--color-text-bright);
  --muted:     var(--color-text-muted);

  /* app.css aliases */
  --deep:           var(--color-void);
  --ocean:          var(--color-abyss);
  --foam:           var(--color-foam);
  --teal-dim:       var(--color-teal-dim);
  --teal-border:    var(--color-teal-border);
  --text-bright:    var(--color-text-bright);
  --text-muted:     var(--color-text-muted);
  --success:        var(--color-fern);
  --warning:        var(--color-sand);
  --danger:         var(--color-coral);

  /* ─── TYPOGRAPHY ────────────────────────────────────────────────────────── */
  --font-heading: 'Fraunces', 'Georgia', serif;
  --font-body:    'Satoshi', 'system-ui', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  --text-xs:    0.7rem;
  --text-sm:    0.8rem;
  --text-base:  0.9rem;
  --text-md:    1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.375rem;
  --text-2xl:   1.75rem;
  --text-3xl:   2.25rem;
  --text-4xl:   3rem;
  --text-5xl:   clamp(2.8rem, 7vw, 5.2rem);

  --leading-tight:  1.15;
  --leading-snug:   1.4;
  --leading-normal: 1.6;
  --leading-relaxed:1.75;

  --tracking-wide:  0.04em;
  --tracking-wider: 0.08em;
  --tracking-tight: -0.03em;

  /* ─── SPACING ────────────────────────────────────────────────────────────── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  /* ─── RADII ─────────────────────────────────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 20px;
  --radius-full:9999px;

  /* ─── SHADOWS ────────────────────────────────────────────────────────────── */
  --shadow-sm:   0 1px 4px rgba(60, 35, 15, 0.20);
  --shadow-md:   0 4px 16px rgba(60, 35, 15, 0.25);
  --shadow-lg:   0 8px 40px rgba(60, 35, 15, 0.30);
  --shadow-teal: 0 0 40px var(--color-teal-shadow);
  --shadow-teal-strong: 0 4px 40px rgba(74, 107, 53, 0.28);

  /* ─── TRANSITIONS ────────────────────────────────────────────────────────── */
  --transition-fast:   all 0.15s ease;
  --transition-base:   all 0.2s ease;
  --transition-slow:   all 0.3s ease;

  /* ─── Z-INDEX ─────────────────────────────────────────────────────────────── */
  --z-base:    1;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   1000;
  --z-toast:   2000;
  --z-nav:     200;
}