/* variables.css */

:root {
  /* Dark theme colors (default) */
  --bg:          #060b10;
  --bg2:         #0c1520;
  --surface:     #101e2d;
  --border:      #182840;
  --accent:      #a855f7;
  --accent2:     #00ff88;
  --accent-glow: rgba(168, 85, 247, 0.12);
  --text:        #c4d6e8;
  --text-dim:    #7a9bb8;
  --muted:       #304860;

  /* Type colors (renamed from --color-*) */
  --type-tech:   #a855f7;  /* purple */
  --type-life:   #f59e0b;  /* amber */
  --type-quote:  #00ff88;  /* green */
  --type-link:   #38bdf8;  /* cyan */
  --type-photo:  #ec4899;  /* pink */

  /* Terminal palette (referenced by hero.css and 404.css) */
  --terminal-prompt: var(--accent2);
  --terminal-text:   var(--text);
  --terminal-accent: var(--type-link);

  /* Typography */
  --font-body:  'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'Courier New', monospace;
  --font-head:  'Oxanium', sans-serif;

  /* Font sizes (base: 17px on html) */
  --fs-body:    0.95rem;
  --fs-nav:     0.8rem;
  --fs-badge:   0.7rem;
  --fs-btn:     0.8rem;
  --fs-h3:      1.5rem;
  --fs-h2:      clamp(1.7rem, 6vw, 3rem);

  /* Layout */
  --container-max: 1080px;
  --container-narrow: 768px;
  --gap-sm:     0.5rem;
  --gap-md:     1.5rem;
  --gap-lg:     2.5rem;
  --gap-xl:     4rem;

  /* Spacing scale */
  --sp-1:       0.25rem;
  --sp-2:       0.5rem;
  --sp-3:       0.75rem;
  --sp-4:       1rem;
  --sp-5:       1.25rem;
  --sp-6:       1.5rem;
  --sp-7:       1.75rem;
  --sp-8:       2rem;
  --sp-9:       2.25rem;
  --sp-10:      2.5rem;
  --sp-12:      3rem;
  --sp-14:      3.5rem;
  --sp-16:      4rem;

  /* Z-index scale */
  --z-base:     1;
  --z-matrix:   0;
  --z-nav:      100;
  --z-menu:     99;
  --z-modal:    200;
  --z-progress: 9999;

  /* Timing */
  --duration-fast:  100ms;
  --duration-base:  300ms;
  --duration-slow:  500ms;

  /* Easing */
  --ease-out:     cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);

  /* Section spacing */
  --section-py-mobile:   4rem;
  --section-py-desktop:  6rem;
  --card-px-mobile:      1.5rem;
  --card-px-desktop:     2rem;

  /* Transitions (legacy, keep for compatibility) */
  --transition: all 0.2s ease;
  --transition-slow: all 0.75s cubic-bezier(0.16,1,0.3,1);
}

html.theme-light {
  /* Light theme */
  --bg:          #f0f4f8;
  --bg2:         #e2eaf4;
  --surface:     #d4dff0;
  --border:      #a8bdd8;
  --accent:      #7c3aed;
  --accent2:     #008f5a;
  --accent-glow: rgba(124, 58, 237, 0.08);
  --text:        #0d1b2a;
  --text-dim:    #2e4a6a;
  --muted:       #6888a8;

  /* Type colors (light equivalents) */
  --type-tech:   #7c3aed;   /* purple */
  --type-life:   #d97706;   /* amber */
  --type-quote:  #008f5a;   /* green */
  --type-link:   #0284c7;   /* cyan */
  --type-photo:  #be185d;   /* pink */
}

/* Breakpoints as CSS variables for reference */
@media (max-width: 479px) {
  :root {
    --bp: "mobile";
  }
}

@media (min-width: 480px) {
  :root {
    --bp: "sm";
  }
}

@media (min-width: 768px) {
  :root {
    --bp: "md";
  }
}

@media (min-width: 1200px) {
  :root {
    --bp: "lg";
  }
}