/* ==========================================================================
   base.css — Design tokens, CSS variables, reset, and body styles
   Life Dashboard · Hobonichi Rainbow Aesthetic
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* ---- CSS Variables ---- */
:root {
  /* --- Core palette --- */
  --bg: #fefefe;
  --bg-alt: #faf9f7;
  --pink: #ffb6c1;
  --hotpink: #ff1493;
  --thistle: #d8bfd8;
  --neon-purple: #c084fc;
  --lavender: #e9d5ff;

  /* --- Text hierarchy --- */
  --text: #5c4f6e;
  --text-soft: #7b6f91;
  --text-faint: #a99bbe;
  --text-inverse: #fff;

  /* --- Pastel backgrounds --- */
  --pink-bg: #fff0f5;
  --yellow-bg: #fffde7;
  --purple-bg: #faf5ff;
  --blue-bg: #f0f9ff;
  --green-bg: #f0fdf4;
  --peach-bg: #fff7ed;

  /* --- UI surface colors --- */
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-overlay: rgba(255, 255, 255, 0.96);
  --border: #e8e0f0;
  --border-soft: #f0eaf5;
  --border-dashed: #d4c8e0;
  --shadow-color: rgba(120, 80, 160, 0.06);
  --shadow-sm: 0 1px 3px var(--shadow-color);
  --shadow-md: 0 4px 12px var(--shadow-color);
  --shadow-lg: 0 8px 24px var(--shadow-color);

  /* --- Rainbow gradient (decorative) --- */
  --rainbow-gradient: linear-gradient(
    90deg,
    #ff1493,
    #f59e0b,
    #22c55e,
    #0ea5e9,
    #6366f1,
    #a855f7,
    #f43f5e
  );
  --rainbow-gradient-soft: linear-gradient(
    90deg,
    #ffe4ec,
    #fefce8,
    #f0fdf4,
    #f0fdfa,
    #e0e7ff,
    #fdf4ff,
    #fff0f5
  );

  /* --- Font stacks --- */
  --font-pixel: 'Press Start 2P', monospace;
  --font-mono: 'VT323', 'Courier New', monospace;
  --font-display: 'Silkscreen', monospace;
  --font-body: 'Pixelify Sans', 'Segoe UI', system-ui, sans-serif;
  --font-code: 'Space Mono', 'Fira Code', monospace;

  /* --- Font sizes --- */
  --text-xs: 0.65rem;
  --text-sm: 0.8rem;
  --text-base: 1rem;
  --text-lg: 1.15rem;
  --text-xl: 1.35rem;
  --text-2xl: 1.6rem;
  --text-3xl: 2rem;

  /* --- Spacing --- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* --- Border radius --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* --- Transitions --- */
  --transition-fast: 120ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 350ms ease;

  /* ======================================================================
     Area Colors — 12 Life Areas
     Each area has an accent (vibrant) and bg (soft pastel)
     ====================================================================== */

  /* Love */
  --area-love-accent: #ff1493;
  --area-love-bg: #ffe4ec;

  /* Career */
  --area-career-accent: #6366f1;
  --area-career-bg: #e0e7ff;

  /* Wealth */
  --area-wealth-accent: #059669;
  --area-wealth-bg: #ecfdf5;

  /* Health */
  --area-health-accent: #14b8a6;
  --area-health-bg: #ecfeff;

  /* Creativity */
  --area-creativity-accent: #f59e0b;
  --area-creativity-bg: #fefce8;

  /* Elevated Energy */
  --area-energy-accent: #eab308;
  --area-energy-bg: #fef9c3;

  /* Intellect */
  --area-intellect-accent: #0ea5e9;
  --area-intellect-bg: #f0fdfa;

  /* Explore */
  --area-explore-accent: #22c55e;
  --area-explore-bg: #f0fdf4;

  /* Organization */
  --area-organization-accent: #a855f7;
  --area-organization-bg: #fdf4ff;

  /* Connection */
  --area-connection-accent: #f43f5e;
  --area-connection-bg: #fff0f5;

  /* Outreach */
  --area-outreach-accent: #818cf8;
  --area-outreach-bg: #f5f3ff;

  /* Self Care */
  --area-selfcare-accent: #38bdf8;
  --area-selfcare-bg: #f0f9ff;

  /* ======================================================================
     Nervous System State Colors
     ====================================================================== */

  /* Slickveil — flowing */
  --state-slickveil-accent: #c4b5fd;
  --state-slickveil-bg: #faf5ff;

  /* Slipcore — grinding */
  --state-slipcore-accent: #fbbf24;
  --state-slipcore-bg: #fffbeb;

  /* Fraymark — fraying */
  --state-fraymark-accent: #f87171;
  --state-fraymark-bg: #fff5f5;

  /* Voltage — electric */
  --state-voltage-accent: #34d399;
  --state-voltage-bg: #ecfdf5;

  /* Clearmark — clear */
  --state-clearmark-accent: #7dd3fc;
  --state-clearmark-bg: #f0f9ff;

  /* Lowline — low */
  --state-lowline-accent: #94a3b8;
  --state-lowline-bg: #f8fafc;
}

/* ---- Body ---- */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---- Base typography ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-pixel);
  line-height: 1.3;
  color: var(--text);
  letter-spacing: 0.5px;
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-base); }
h5, h6 { font-size: var(--text-sm); }

p { margin-bottom: var(--space-md); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--hotpink);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--neon-purple);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* ---- Utility: Scrollbar ---- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-alt);
}

::-webkit-scrollbar-thumb {
  background: var(--thistle);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--neon-purple);
}

/* ---- Selection ---- */
::selection {
  background: var(--area-love-bg);
  color: var(--hotpink);
}

/* ---- Screen-reader only ---- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Local Pixel Fonts — Heart Code
   ========================================================================== */

@font-face {
  font-family: 'Upheaval';
  src: url('/fonts/upheavtt.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'KiwiSoda';
  src: url('/fonts/KiwiSoda.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'RainyHearts';
  src: url('/fonts/rainyhearts.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'VCR OSD Mono';
  src: url('/fonts/VCR_OSD_MONO_1.001.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Pixellari';
  src: url('/fonts/Pixellari.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Alagard';
  src: url('/fonts/alagard.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'GothicPixels';
  src: url('/fonts/GothicPixels.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Retro Gaming';
  src: url('/fonts/Retro Gaming.ttf') format('truetype');
  font-display: swap;
}

/* ---- Heart Code Font Classes ---- */
.hc-font-ps2p { font-family: 'Press Start 2P', monospace; }
.hc-font-vt { font-family: 'VT323', monospace; }
.hc-font-silk { font-family: 'Silkscreen', monospace; }
.hc-font-pix { font-family: 'Pixelify Sans', sans-serif; }
.hc-font-mono { font-family: 'Space Mono', monospace; }
.hc-font-upheaval { font-family: 'Upheaval', monospace; }
.hc-font-kiwi { font-family: 'KiwiSoda', monospace; }
.hc-font-rainy { font-family: 'RainyHearts', monospace; }
.hc-font-vcr { font-family: 'VCR OSD Mono', monospace; }
.hc-font-pixellari { font-family: 'Pixellari', monospace; }