/* ========================================
   CSS VARIABLES - THEME & DESIGN TOKENS
======================================== */

:root {
  /* Light theme */
  --text-color: #000000;
  --selection-color: #982b34;
  --selection-text-color: #ffffff;
  --background-color: #fffbf5;
  --border-color: #e5e5e5;
  --hover-color: #f5f5f5;
  --header-bg: #fffbf5b3;

  /* Surface system (shared glass language) */
  --surface-1: #fffdf9f2;
  --surface-2: #f8f3ebde;
  --surface-border: #d8d1c6;
  --surface-border-strong: #c7bdae;
  --surface-shadow-1: #0000000f;
  --surface-shadow-2: #0000001c;
  --surface-inset: #ffffff26;
  --surface-inset-strong: #ffffff4d;
  --surface-blur: 0.75rem;
  --radius-surface: 0.75rem;
  --elevation-surface: 0 0.375rem 1.2rem var(--surface-shadow-1);
  --elevation-surface-strong: 0 0.5rem 2rem var(--surface-shadow-2);

  /* Backward-compatible aliases */
  --header-float-bg: var(--surface-1);
  --header-float-border: var(--surface-border);
  --glass-bg: var(--surface-1);
  --glass-bg-hover: var(--surface-2);
  --glass-border: var(--surface-border);
  --glass-border-hover: var(--surface-border-strong);
  --glass-shadow: var(--surface-shadow-1);
  --glass-shadow-hover: var(--surface-shadow-2);

  /* About section background effects */
  --about-bg-primary: #fffef033;
  --about-bg-secondary: #fefceb1f;
  --about-bg-tertiary: #fdfbe60f;
  --about-overlay-primary: #fffef514;
  --about-overlay-secondary: #fefdf00d;
  --about-overlay-tertiary: #fdfceb08;

  /* Dynamic background color (set by JavaScript) */
  --dynamic-bg-color: #fffbf5;
  --dynamic-bg-r: 255;
  --dynamic-bg-g: 251;
  --dynamic-bg-b: 245;

  /* Font families */
  --font-heading: "Lora", serif;
  --font-body: "IBM Plex Mono", monospace;
  --font-ui:
    "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;

  /* Consistent font sizes */
  --font-size-h1: 2.4rem;
  --font-size-h2: 2.6rem;
  --font-size-h3: 1.35rem;
  --font-size-h4: 1.15rem;
  --font-size-body: 1rem;
  --font-size-secondary: 0.9rem;
  --font-size-small: 0.8rem;
  --font-size-subtitle: 1.25rem;

  /* Mobile font sizes */
  --font-size-h1-mobile: 2rem;
  --font-size-h2-mobile: 2.1rem;
  --font-size-h3-mobile: 1.2rem;
  --font-size-h4-mobile: 1.05rem;
  --font-size-subtitle-mobile: 1.15rem;
}

/* Dark theme */
[data-theme="dark"] {
  --text-color: #ffffff;
  --background-color: #000000;
  --border-color: #2a2a2a;
  --hover-color: #1a1a1a;
  --header-bg: #000000b3;

  /* Surface system (shared glass language) */
  --surface-1: #1f1f1fe8;
  --surface-2: #262626f0;
  --surface-border: #3a3a3a;
  --surface-border-strong: #4d4d4d;
  --surface-shadow-1: #00000055;
  --surface-shadow-2: #00000073;
  --surface-inset: #ffffff1a;
  --surface-inset-strong: #ffffff33;
  --surface-blur: 0.75rem;

  /* Backward-compatible aliases */
  --header-float-bg: var(--surface-1);
  --header-float-border: var(--surface-border);
  --glass-bg: var(--surface-1);
  --glass-bg-hover: var(--surface-2);
  --glass-border: var(--surface-border);
  --glass-border-hover: var(--surface-border-strong);
  --glass-shadow: var(--surface-shadow-1);
  --glass-shadow-hover: var(--surface-shadow-2);

  /* About section background effects hidden for dark mode as requested */
  --about-bg-primary: transparent;
  --about-bg-secondary: transparent;
  --about-bg-tertiary: transparent;
  --about-overlay-primary: transparent;
  --about-overlay-secondary: transparent;
  --about-overlay-tertiary: transparent;

  /* Dynamic background color for dark mode */
  --dynamic-bg-color: #000000;
  --dynamic-bg-r: 0;
  --dynamic-bg-g: 0;
  --dynamic-bg-b: 0;
}