/*
 * KaiNest Design Tokens
 * Single source of truth for color, type, spacing, and visual language.
 * Hawaiian-rooted palette — ocean depth, volcanic dark, warm sand/coral, lava glow.
 * "Built from the islands, for the islands."
 *
 * Consumers: site.css (marketing), app.css (dashboard), inline layouts.
 * Dark-mode-first. Light mode reserved for future use via [data-theme="light"].
 */

/* ─── 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: Ocean ──────────────────────────────────────────────── */
  --color-void:       #060910;   /* Deepest night — page background base */
  --color-depth:      #0b1120;   /* Ocean floor — section backgrounds */
  --color-abyss:      #0f1929;   /* Deep trench — sidebar, nav backgrounds */
  --color-reef:       #162336;   /* Reef depth — card backgrounds */
  --color-lagoon:     #1d3048;   /* Lagoon — elevated panels, hover states */
  --color-foam:       #2a4566;   /* Sea foam layer — form inputs, chips */

  /* ─── CORE PALETTE: Volcanic Dark ─────────────────────────────────────── */
  --color-lava:       #1a0e0a;   /* Dark lava — alternative dark background */
  --color-obsidian:   #13100d;   /* Obsidian — mixed with ocean tones */

  /* ─── ACCENT: Ocean Teal ───────────────────────────────────────────────── */
  --color-teal:       #29c9b0;   /* Primary accent — ocean surface shimmer */
  --color-teal-bright:#3de0c8;   /* Hover/emphasis state */
  --color-teal-dim:   rgba(41, 201, 176, 0.14);
  --color-teal-glow:  rgba(41, 201, 176, 0.08);
  --color-teal-border:rgba(41, 201, 176, 0.22);
  --color-teal-shadow:rgba(41, 201, 176, 0.18);

  /* ─── ACCENT: Sunset Coral / Lava ─────────────────────────────────────── */
  --color-coral:      #f26d55;   /* Alert, warning, destructive — lava heat */
  --color-coral-dim:  rgba(242, 109, 85, 0.12);
  --color-coral-border:rgba(242, 109, 85, 0.28);

  /* ─── ACCENT: Sand / Warm Gold ─────────────────────────────────────────── */
  --color-sand:       #e8b86d;   /* Warm gold — highlights, premium feel */
  --color-sand-dim:   rgba(232, 184, 109, 0.12);
  --color-sand-border:rgba(232, 184, 109, 0.28);

  /* ─── ACCENT: Fern Green ───────────────────────────────────────────────── */
  --color-fern:       #3ecf8e;   /* Success — tropical fern, muted emerald */
  --color-fern-dim:   rgba(62, 207, 142, 0.12);
  --color-fern-border:rgba(62, 207, 142, 0.28);

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

  /* ─── TEXT ─────────────────────────────────────────────────────────────── */
  --color-text-primary:  #d8e6f0;   /* Main body text — moonlit ocean */
  --color-text-secondary:#8aa8c0;   /* Secondary — dimmer, less prominent */
  --color-text-muted:    #4e6a82;   /* Captions, labels, placeholders */
  --color-text-bright:   #edf4fa;   /* High emphasis — headings, strong */
  --color-text-inverse:  #060910;   /* Text on teal/bright backgrounds */

  /* ─── SURFACE / BORDERS ─────────────────────────────────────────────────── */
  --color-border-subtle:  rgba(255, 255, 255, 0.05);
  --color-border-dim:     rgba(255, 255, 255, 0.08);
  --color-border-accent:  rgba(41, 201, 176, 0.22);
  --color-overlay:        rgba(0, 0, 0, 0.55);

  /* ─── 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 (backward compat with existing CSS) ─────────────────
   * These map the old variable names to the new palette.
   * Existing site.css / app.css continues to work.
   * Gradually migrate call sites to the new names.
   */
  --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;         /* Editorial serif */
  --font-body:    'Satoshi', 'system-ui', sans-serif;   /* Clean grotesque */
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  --text-xs:    0.7rem;    /* 11.2px */
  --text-sm:    0.8rem;    /* 12.8px */
  --text-base:  0.9rem;    /* 14.4px */
  --text-md:    1rem;      /* 16px */
  --text-lg:    1.125rem;  /* 18px */
  --text-xl:    1.375rem;  /* 22px */
  --text-2xl:   1.75rem;   /* 28px */
  --text-3xl:   2.25rem;   /* 36px */
  --text-4xl:   3rem;      /* 48px */
  --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;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* ─── 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(0, 0, 0, 0.3);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg:   0 8px 40px rgba(0, 0, 0, 0.5);
  --shadow-teal: 0 0 40px var(--color-teal-shadow);
  --shadow-teal-strong: 0 4px 40px rgba(41, 201, 176, 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;
}