/**
 * Kangaroo Brand — CSS Design Tokens
 * Warm, energetic, consumer-friendly. Light-mode default.
 * Import once at the root of your app.
 */

:root {
  /* ─── Primary — Warm Amber Orange ───────────────────────────────── */
  --color-amber-pale:    #FFF7ED;
  --color-amber-light:   #FB923C;
  --color-amber:         #F97316;
  --color-amber-dark:    #EA580C;
  --color-amber-black:   #431407;

  /* ─── Neutrals ───────────────────────────────────────────────────── */
  --color-ink:            #1C0F07;
  --color-midnight:       #1F1410;
  --color-slate:          #2D1F18;
  --color-storm:          #4A3728;
  --color-muted:          #78716C;
  --color-muted-light:    #A8A29E;
  --color-border:         #E7E5E4;
  --color-cloud:          #FAFAF8;
  --color-white:          #FFFFFF;

  /* ─── RGB channels (for rgba shadows/overlays) ───────────────────── */
  --color-amber-rgb:      249, 115, 22;

  /* ─── Semantic ───────────────────────────────────────────────────── */
  --color-rose:           #E11D48;
  --color-sky:            #0EA5E9;
  --color-plum:           #7C3AED;
  --color-leaf:           #15803D;
  --color-honey:          #CA8A04;
  --color-pass:           #15803D;
  --color-warn:           #CA8A04;
  --color-fail:           #E11D48;

  /* ─── Typography ─────────────────────────────────────────────────── */
  --font-display:         'Manrope', sans-serif;
  --font-sans:            'Manrope', sans-serif;
  --font-mono:            'Fira Code', monospace;

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-bold:     700;
  --font-weight-extrabold: 800;

  /* ─── Font Sizes ─────────────────────────────────────────────────── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  34px;
  --text-4xl:  44px;

  /* ─── Letter Spacing ─────────────────────────────────────────────── */
  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;

  /* ─── Border Radius — rounder, friendlier ───────────────────────── */
  --radius-sm:   8px;
  --radius:      12px;
  --radius-md:   14px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;

  /* ─── Shadows ────────────────────────────────────────────────────── */
  --shadow-sm:       0 1px 3px rgba(var(--color-amber-rgb),0.08);
  --shadow:          0 2px 8px rgba(var(--color-amber-rgb),0.10);
  --shadow-md:       0 4px 16px rgba(var(--color-amber-rgb),0.12);
  --shadow-lg:       0 8px 32px rgba(var(--color-amber-rgb),0.16);
  --shadow-amber:    0 4px 24px rgba(var(--color-amber-rgb),0.30);
  --shadow-amber-lg: 0 8px 40px rgba(var(--color-amber-rgb),0.40);

  /* ─── Transitions ────────────────────────────────────────────────── */
  --transition-fast: 100ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition:      150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── Semantic Aliases — light mode (default) ────────────────────── */
  --bg-primary:        var(--color-white);
  --bg-secondary:      var(--color-cloud);
  --bg-surface:        var(--color-white);
  --text-primary:      var(--color-ink);
  --text-secondary:    var(--color-muted);
  --text-accent:       var(--color-amber);
  --border-default:    var(--color-border);
  --interactive:       var(--color-amber);
  --interactive-hover: var(--color-amber-dark);
}

/* ─── Dark Mode Overrides ──────────────────────────────────────────── */
.dark, [data-theme="dark"] {
  --bg-primary:        var(--color-midnight);
  --bg-secondary:      var(--color-slate);
  --bg-surface:        var(--color-slate);
  --text-primary:      var(--color-cloud);
  --text-secondary:    var(--color-muted-light);
  --text-accent:       var(--color-amber-light);
  --border-default:    var(--color-storm);
  --interactive:       var(--color-amber-light);
  --interactive-hover: var(--color-amber);
}

/* ─── Base Resets ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
}

/* ─── Utility Classes ──────────────────────────────────────────────── */
.font-display { font-family: var(--font-display); font-weight: 800; letter-spacing: var(--tracking-tight); }
.font-ui      { font-family: var(--font-sans); }
.font-data    { font-family: var(--font-mono); }
.text-accent  { color: var(--text-accent); }
.text-muted   { color: var(--text-secondary); }