/* =====================================================
   Melatonin — Base Styles
   Catppuccin Mocha design tokens + CSS reset
   ===================================================== */

:root {
  /* ── Catppuccin Mocha Palette ── */
  --ctp-rosewater: #f5e0dc;
  --ctp-flamingo:  #f2cdcd;
  --ctp-pink:      #f5c2e7;
  --ctp-mauve:     #cba6f7;
  --ctp-red:       #f38ba8;
  --ctp-maroon:    #eba0ac;
  --ctp-peach:     #fab387;
  --ctp-yellow:    #f9e2af;
  --ctp-green:     #a6e3a1;
  --ctp-teal:      #94e2d5;
  --ctp-sky:       #89dceb;
  --ctp-sapphire:  #74c7ec;
  --ctp-blue:      #89b4fa;
  --ctp-lavender:  #b4befe;
  --ctp-text:      #cdd6f4;
  --ctp-subtext1:  #bac2de;
  --ctp-subtext0:  #a6adc8;
  --ctp-overlay2:  #9399b2;
  --ctp-overlay1:  #7f849c;
  --ctp-overlay0:  #6c7086;
  --ctp-surface2:  #585b70;
  --ctp-surface1:  #45475a;
  --ctp-surface0:  #313244;
  --ctp-base:      #1e1e2e;
  --ctp-mantle:    #181825;
  --ctp-crust:     #11111b;

  /* ── Semantic Aliases ── */
  --bg:            var(--ctp-base);
  --bg-alt:        var(--ctp-mantle);
  --bg-deep:       var(--ctp-crust);
  --surface:       var(--ctp-surface0);
  --surface-hi:    var(--ctp-surface1);
  --surface-top:   var(--ctp-surface2);
  --border:        var(--ctp-surface1);
  --border-subtle: var(--ctp-surface0);
  --text:          var(--ctp-text);
  --subtext:       var(--ctp-subtext1);
  --muted:         var(--ctp-overlay1);
  --accent:        var(--ctp-mauve);
  --accent-dim:    rgba(203, 166, 247, 0.15);
  --success:       var(--ctp-green);
  --warning:       var(--ctp-yellow);
  --danger:        var(--ctp-red);
  --info:          var(--ctp-blue);

  /* ── Spacing ── */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px;  --sp-6: 24px;
  --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --sp-16: 64px;

  /* ── Typography ── */
  --font: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;

  /* ── Shape ── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-full: 9999px;

  /* ── Layout ── */
  --header-h: 52px;
  --nav-w:    272px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; height: 100%; }

body {
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  min-height: 100dvh;
  max-width: 540px;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: var(--font); cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: var(--font); }
img { max-width: 100%; height: auto; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { line-height: 1.3; font-weight: 600; color: var(--text); }
p { color: var(--subtext); }