/* ═══════════════════════════════════════════════════════════════════════════
   Kafo — Theme Variables
   Modern SaaS color palette & design tokens
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Background & Surface ──────────────────────────────────────────── */
  --background:       #0c0a09;  /* Obsidian Coffee       */
  --surface:          #171412;  /* Roaster Dark Surface  */
  --surface-light:    #1e1a16;  /* Lifted surface       */
  --surface-hover:    #26211c;  /* Hover state          */

  /* ── Brand / Primary ──────────────────────────────────────────────── */
  --primary:          #d9a05b;  /* Warm Amber Gold       */
  --primary-hover:    #e2b16e;  /* Brighter gold         */
  --primary-dim:      #b8873f;  /* Dimmed gold           */
  --primary-glow:     rgba(217, 160, 91, 0.15);

  /* ── Accent ───────────────────────────────────────────────────────── */
  --accent:           #f97316;  /* Burnt Orange          */
  --accent-hover:     #fb923c;  /* Lighter orange        */

  /* ── Text ─────────────────────────────────────────────────────────── */
  --text-bright:      #fafaf9;  /* Linen White           */
  --text-primary:     #e7e5e4;  /* Warm white            */
  --text-muted:       #a8a29e;  /* Pebble Gray           */
  --text-dim:         #78736f;  /* Dim gray              */

  /* ── Borders & Dividers ───────────────────────────────────────────── */
  --border:           rgba(255, 255, 255, 0.06);
  --border-light:     rgba(217, 160, 91, 0.12);
  --border-glow:      rgba(217, 160, 91, 0.25);

  /* ── Feedback ─────────────────────────────────────────────────────── */
  --success:          #22c55e;  /* Green                 */
  --warning:          #eab308;  /* Amber                 */
  --error:            #ef4444;  /* Red                   */
  --info:             #3b82f6;  /* Blue                  */

  /* ── Shadows ──────────────────────────────────────────────────────── */
  --shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:        0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg:        0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow:      0 0 24px rgba(217, 160, 91, 0.08);
  --shadow-card:      0 2px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(217, 160, 91, 0.06);

  /* ── Typography ───────────────────────────────────────────────────── */
  --font-heading:     'Playfair Display', Georgia, serif;
  --font-body:        'Outfit', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:        'JetBrains Mono', 'Fira Code', monospace;

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

  /* ── Transitions ──────────────────────────────────────────────────── */
  --ease-out:         cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:    200ms;
  --duration-normal:  350ms;
  --duration-slow:    600ms;

  /* ── Layout ───────────────────────────────────────────────────────── */
  --container-max:    1200px;
  --header-height:    82px;
  --header-scrolled:  64px;
}

/* ── Light Mint Theme ───────────────────────────────────────────────────── */
[data-theme="mint"] {
  --background:       #f5f0eb;
  --surface:          #ffffff;
  --surface-light:    #faf8f5;
  --surface-hover:    #f0ebe5;
  --text-bright:      #1c1917;
  --text-primary:     #292524;
  --text-muted:       #78716c;
  --text-dim:         #a8a29e;
  --border:           rgba(0, 0, 0, 0.08);
  --shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:        0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg:        0 8px 32px rgba(0, 0, 0, 0.1);
  --shadow-card:      0 2px 24px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
}