/* ============================================================
   KOJILABS — Design Tokens & Theme Variables
   
   A complete token system powering 5 distinct color themes.
   Themes are activated via the [data-theme] attribute on <html>.
   Every color, shadow, radius, spacing, and type size is
   expressed as a custom property for total consistency.
   ============================================================ */

/* ── Theme Transition ────────────────────────────────────────
   Smooth crossfade when the user switches themes at runtime. */
html[data-theme] {
  transition: background-color 0.5s ease, color 0.5s ease;
}

/* ────────────────────────────────────────────────────────────
   SPACING TOKENS
   A harmonic scale from 4px to 96px, applied uniformly
   across every layout and component.
   ──────────────────────────────────────────────────────────── */
:root {
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
}

/* ────────────────────────────────────────────────────────────
   TYPOGRAPHY TOKENS
   Font sizes follow a modular scale for visual rhythm.
   Weights range from Light (300) to Black (900).
   ──────────────────────────────────────────────────────────── */
:root {
  /* Size scale */
  --text-xs:  0.75rem;   /* 12px */
  --text-sm:  0.875rem;  /* 14px */
  --text-md:  1rem;      /* 16px */
  --text-lg:  1.125rem;  /* 18px */
  --text-xl:  1.25rem;   /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 2rem;      /* 32px */
  --text-4xl: 2.5rem;    /* 40px */
  --text-5xl: 3.5rem;    /* 56px */

  /* Weight scale */
  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold:800;
  --font-weight-black:    900;
}

/* ────────────────────────────────────────────────────────────
   SHARED STRUCTURAL TOKENS
   Radii, heights, and blur amounts that stay constant
   across every theme.
   ──────────────────────────────────────────────────────────── */
:root {
  --card-radius:   20px;
  --btn-radius:    12px;
  --navbar-height: 72px;
  --blur-strength: 20px;
}


/* ================================================================
   T H E M E   1  ·  M I D N I G H T   (default)
   Pure black canvas with white typographic accents.
   The monochrome palette feels confident and editorial.
   ================================================================ */
:root,
html[data-theme="midnight"] {
  --bg:             #000000;
  --bg-secondary:   #0A0A0A;
  --surface:        rgba(255, 255, 255, 0.05);
  --surface-hover:  rgba(255, 255, 255, 0.08);
  --surface-border: rgba(255, 255, 255, 0.08);

  --text-primary:   #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.6);
  --text-tertiary:  rgba(255, 255, 255, 0.35);

  --accent:       #FFFFFF;
  --accent-hover: rgba(255, 255, 255, 0.85);
  --accent-glow:  rgba(255, 255, 255, 0.15);

  --blur-tint:  rgba(0, 0, 0, 0.72);

  --shadow:    0 2px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
}


/* ================================================================
   T H E M E   3  ·  O B S I D I A N
   Deep blue-violet dark mode with indigo accents.
   Evokes developer tooling and late-night focus.
   ================================================================ */
html[data-theme="obsidian"] {
  --bg:             #08080F;
  --bg-secondary:   #0E0E1A;
  --surface:        rgba(99, 102, 241, 0.06);
  --surface-hover:  rgba(99, 102, 241, 0.1);
  --surface-border: rgba(99, 102, 241, 0.1);

  --text-primary:   #E8E8FF;
  --text-secondary: rgba(232, 232, 255, 0.55);
  --text-tertiary:  rgba(232, 232, 255, 0.3);

  --accent:       #818CF8;
  --accent-hover: #6366F1;
  --accent-glow:  rgba(99, 102, 241, 0.2);

  --blur-tint:  rgba(8, 8, 20, 0.72);

  --shadow:    0 2px 20px rgba(99, 102, 241, 0.1);
  --shadow-lg: 0 8px 40px rgba(99, 102, 241, 0.15);
}


/* ================================================================
   T H E M E   4  ·  R O S É G O L D
   Warm, dark rose-tinted palette with pink accents.
   Bold and expressive — creative energy meets elegance.
   ================================================================ */
html[data-theme="rosegold"] {
  --bg:             #0F0808;
  --bg-secondary:   #1A0E0E;
  --surface:        rgba(244, 63, 94, 0.06);
  --surface-hover:  rgba(244, 63, 94, 0.1);
  --surface-border: rgba(244, 63, 94, 0.08);

  --text-primary:   #FFE8EC;
  --text-secondary: rgba(255, 232, 236, 0.55);
  --text-tertiary:  rgba(255, 232, 236, 0.3);

  --accent:       #FB7185;
  --accent-hover: #F43F5E;
  --accent-glow:  rgba(244, 63, 94, 0.2);

  --blur-tint:  rgba(15, 8, 10, 0.72);

  --shadow:    0 2px 20px rgba(244, 63, 94, 0.1);
  --shadow-lg: 0 8px 40px rgba(244, 63, 94, 0.15);
}


/* ================================================================
   T H E M E   5  ·  A U R O R A
   Dark forest canvas with emerald-green luminance.
   Nature-inspired — calm, focused, and alive.
   ================================================================ */
html[data-theme="aurora"] {
  --bg:             #080F0A;
  --bg-secondary:   #0E1A12;
  --surface:        rgba(16, 185, 129, 0.06);
  --surface-hover:  rgba(16, 185, 129, 0.1);
  --surface-border: rgba(16, 185, 129, 0.08);

  --text-primary:   #E8FFF2;
  --text-secondary: rgba(232, 255, 242, 0.55);
  --text-tertiary:  rgba(232, 255, 242, 0.3);

  --accent:       #34D399;
  --accent-hover: #10B981;
  --accent-glow:  rgba(16, 185, 129, 0.2);

  --blur-tint:  rgba(8, 15, 10, 0.72);

  --shadow:    0 2px 20px rgba(16, 185, 129, 0.1);
  --shadow-lg: 0 8px 40px rgba(16, 185, 129, 0.15);
}