/* ===== VeloxUI Portfolio — Theme Showcase (6 themes) ===== */
/* Base tokens shared across all themes */
:root {
  --radius: 0.75rem;
  --radius-lg: 1rem;
  --transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}

/* Theme 1: Catppuccin Latte (light) */
:root[data-theme="latte"] {
  --color-bg: #eff1f5; --color-surface: #ccd0da; --color-surface-deep: #acb0be;
  --color-text: #4c4f69; --color-text-secondary: #6c6f85; --color-accent: #1e66f5;
  --color-border: #9ca0b0; --color-border-strong: #8c8fa1;
  --color-shadow: 0 1px 3px rgba(76,79,105,.05), 0 1px 2px rgba(76,79,105,.03);
  --color-shadow-strong: 0 4px 6px -1px rgba(76,79,105,.08), 0 2px 4px -2px rgba(76,79,105,.08);
  --font-heading: "Lora", Georgia, serif;
}
/* Theme 2: Catppuccin Frappé (cool dark) */
:root[data-theme="frappe"] {
  --color-bg: #303446; --color-surface: #414559; --color-surface-deep: #626880;
  --color-text: #c6d0f5; --color-text-secondary: #a5adce; --color-accent: #85c1dc;
  --color-border: #737994; --color-border-strong: #838ba7;
  --color-shadow: 0 1px 3px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.15);
  --color-shadow-strong: 0 4px 6px -1px rgba(0,0,0,.35), 0 2px 4px -2px rgba(0,0,0,.25);
  --font-heading: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
}
/* Theme 3: Catppuccin Macchiato (warm dark) */
:root[data-theme="macchiato"] {
  --color-bg: #24273a; --color-surface: #363a4f; --color-surface-deep: #5b6078;
  --color-text: #cad3f5; --color-text-secondary: #a5adcb; --color-accent: #f5a97f;
  --color-border: #6e738d; --color-border-strong: #8087a2;
  --color-shadow: 0 1px 3px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.18);
  --color-shadow-strong: 0 4px 6px -1px rgba(0,0,0,.32), 0 2px 4px -2px rgba(0,0,0,.25);
  --font-heading: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
}
/* Theme 4: Catppuccin Mocha (rich dark) */
:root[data-theme="mocha"] {
  --color-bg: #1e1e2e; --color-surface: #313244; --color-surface-deep: #585b70;
  --color-text: #cdd6f4; --color-text-secondary: #a6adc8; --color-accent: #b4befe;
  --color-border: #6c7086; --color-border-strong: #7f849c;
  --color-shadow: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.22);
  --color-shadow-strong: 0 4px 6px -1px rgba(0,0,0,.4), 0 2px 4px -2px rgba(0,0,0,.3);
  --font-heading: "Playfair Display", Georgia, serif;
}
/* Theme 5: Nord (arctic dark) — base16 nord */
:root[data-theme="nord"] {
  --color-bg: #2e3440; --color-surface: #3b4252; --color-surface-deep: #434c5e;
  --color-text: #e5e9f0; --color-text-secondary: #d8dee9; --color-accent: #81a1c1;
  --color-border: #4c566a; --color-border-strong: #d8dee9;
  --color-shadow: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --color-shadow-strong: 0 4px 6px -1px rgba(0,0,0,.4), 0 2px 4px -2px rgba(0,0,0,.3);
  --font-heading: "JetBrains Mono", "Fira Code", "Source Code Pro", monospace;
}
/* Theme 6: Solarized Dark (teal-gold) — base16 solarized-dark */
:root[data-theme="solarized-dark"] {
  --color-bg: #002b36; --color-surface: #073642; --color-surface-deep: #586e75;
  --color-text: #93a1a1; --color-text-secondary: #839496; --color-accent: #b58900;
  --color-border: #657b83; --color-border-strong: #839496;
  --color-shadow: 0 1px 3px rgba(0,0,0,.32), 0 1px 2px rgba(0,0,0,.22);
  --color-shadow-strong: 0 4px 6px -1px rgba(0,0,0,.45), 0 2px 4px -2px rgba(0,0,0,.3);
  --font-heading: "PT Serif", Georgia, serif;
}

/* ===== Reset & base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font-body); background-color: var(--color-bg);
  color: var(--color-text); line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  transition: var(--transition);
}
img, svg { max-width: 100%; display: block; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Typography */
h1, h2, h3, .section-title, .hero-text h1, .project-hero h1 { font-family: var(--font-heading); }
.hero-text h1, .project-hero h1 { font-weight: 800; }
.hero-text h1 span, .hero-text h1 strong, .project-hero h1 span { color: var(--color-accent); }
.quote { font-family: var(--font-heading); }

/* Layout utilities */
.container { width: min(90%, 72rem); margin-inline: auto; padding-block: 3rem; }
.section { padding-block: 3rem; }
.grid-3 { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-2 { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.section-title { font-size: clamp(1.75rem, 2.5vw + 0.5rem, 2.25rem); font-weight: 700; margin-bottom: .5rem; text-align: center; }
.section-subtitle { color: var(--color-text-secondary); text-align: center; margin-inline: auto; max-width: 42rem; margin-bottom: 2.5rem; }
.credit { font-size: .75rem; opacity: .7; }

/* ===== Header ===== */
.site-header { position: sticky; top: 0; z-index: 50; background-color: var(--color-surface, var(--color-bg)); border-bottom: 1px solid var(--color-border); box-shadow: var(--color-shadow); }
.header-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.logo { font-weight: 700; font-size: 1.25rem; color: var(--color-text); }
.logo span { color: var(--color-accent); }
.nav { display: flex; gap: 1.5rem; font-size: .9rem; font-weight: 500; }
.nav a { color: var(--color-text-secondary); }
.nav a:hover { color: var(--color-text); }

/* ===== Theme switcher ===== */
.theme-switcher { display: inline-flex; flex-wrap: wrap; gap: .25rem; background-color: var(--color-surface-deep); border: 1px solid var(--color-border); border-radius: 999px; padding: .25rem; }
.theme-pill { all: unset; cursor: pointer; padding: .45rem .9rem; border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--color-text-secondary); transition: var(--transition); }
.theme-pill:hover { color: var(--color-text); }
.theme-pill.active, .theme-pill:focus-visible { color: var(--color-text); background-color: var(--color-bg); box-shadow: var(--color-shadow-strong); }

/* ===== Hero ===== */
.hero { border-bottom: 1px solid var(--color-border); }
.hero-inner { display: grid; align-items: center; gap: 0rem; grid-template-columns: 1fr; padding-block: 4rem; }
@media (min-width: 48rem) { .hero-inner { grid-template-columns: 1.1fr 0.9fr; } }
.hero-text h1 { font-size: clamp(2rem, 4.5vw + .5rem, 2.75rem); line-height: 1.2; margin-bottom: 1rem; }
.lead { font-size: 1.1rem; color: var(--color-text-secondary); max-width: 38rem; margin-bottom: 1.75rem; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ===== Buttons ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; font-family: inherit; font-weight: 600; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: var(--transition); font-size: .95rem; }
.btn-primary { background-color: var(--color-accent); color: #fff; padding: .7rem 1.4rem; }
.btn-primary:hover { filter: brightness(0.92); }
.btn-ghost { background: transparent; color: var(--color-text-secondary); padding: .7rem 1.4rem; }
.btn-ghost:hover { color: var(--color-text); background-color: var(--color-surface-deep); }
.btn-sm { padding: .5rem 1rem; font-size: .85rem; }

/* ===== Cards ===== */
.card { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--color-shadow); transition: var(--transition); }
.card:hover { box-shadow: var(--color-shadow-strong); transform: translateY(-2px); }
.card-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .7rem; background-color: var(--color-accent); color: #fff; font-weight: 700; margin-bottom: 1rem; }
.card h3 { margin: .75rem 0 .5rem; font-size: 1.1rem; font-weight: 600; }
.card p { font-size: .9rem; color: var(--color-text-secondary); }

/* ===== Project cards / project pages ===== */
.project-card { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--color-shadow); transition: var(--transition); display: flex; flex-direction: column; gap: .75rem; }
.project-card:hover { box-shadow: var(--color-shadow-strong); transform: translateY(-2px); }
.project-thumb { height: 140px; border-radius: .5rem; border: 1px solid var(--color-border); background: linear-gradient(135deg, var(--color-surface-deep) 0%, var(--color-surface) 100%); }
.project-meta { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.project-meta h3 { margin: 0; font-size: 1.15rem; }
.stack { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.stack .tag { font-size: .72rem; background: var(--color-surface-deep); color: var(--color-text-secondary); border: 1px solid var(--color-border); border-radius: .3rem; padding: .15rem .5rem; }
.project-hero { min-height: 60vh; display: grid; align-content: center; gap: 1.5rem; grid-template-columns: 1fr; padding-block: 5rem; border-bottom: 1px solid var(--color-border); }
@media (min-width: 48rem) { .project-hero { grid-template-columns: 1fr .9fr; } }
.project-hero h1 { font-size: clamp(2.2rem, 4vw + 1rem, 3rem); line-height: 1.15; }
.project-hero .lead { font-size: 1.15rem; }
.stat { text-align: center; }
.stat .num { font-size: clamp(1.75rem, 2.5vw, 2.4rem); font-weight: 800; color: var(--color-accent); }
.stat .lbl { font-size: .85rem; color: var(--color-text-secondary); }

/* ===== Swatch colors (used in theme cards / showcase page) ===== */
.swatch { display: block; height: 1.6rem; width: 1.6rem; border-radius: .4rem; border: 1px solid var(--color-border-strong); }
.swatch-latte { background: linear-gradient(135deg, #eff1f5 0%, #ccd0da 100%); }
.swatch-frappe { background: linear-gradient(135deg, #303446 0%, #414559 100%); }
.swatch-macchiato { background: linear-gradient(135deg, #24273a 0%, #363a4f 100%); }
.swatch-mocha { background: linear-gradient(135deg, #1e1e2e 0%, #313244 100%); }
.swatch-nord { background: linear-gradient(135deg, #2e3440 0%, #3b4252 100%); }
.swatch-solarized-dark { background: linear-gradient(135deg, #002b36 0%, #073642 100%); }
.swatch-text { margin-top: .6rem; background: linear-gradient(135deg, var(--color-text) 0%, var(--color-text-secondary) 100%); }
.theme-card[data-theme="latte"] .swatch-text { background: linear-gradient(135deg, #4c4f69 0%, #6c6f85 100%); }
.theme-card[data-theme="frappe"] .swatch-text { background: linear-gradient(135deg, #c6d0f5 0%, #a5adce 100%); }
.theme-card[data-theme="macchiato"] .swatch-text { background: linear-gradient(135deg, #cad3f5 0%, #a5adcb 100%); }
.theme-card[data-theme="mocha"] .swatch-text { background: linear-gradient(135deg, #cdd6f4 0%, #a6adc8 100%); }
.theme-card[data-theme="nord"] .swatch-text { background: linear-gradient(135deg, #e5e9f0 0%, #d8dee9 100%); }
.theme-card[data-theme="solarized-dark"] .swatch-text { background: linear-gradient(135deg, #93a1a1 0%, #839496 100%); }

/* ===== Showcase mini-section (inline palette preview) ===== */
.showcase-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.showcase-chip { font-size: .8rem; border: 1px solid var(--color-border); border-radius: 999px; padding: .3rem .7rem; }

/* ===== Testimonials ===== */
.testimonial { border-style: dashed; }
.quote { font-style: italic; font-size: 1rem; position: relative; margin-bottom: 1rem; }
.quote::before { content: """; font-size: 2.5rem; position: absolute; top: -1rem; left: -1rem; color: var(--color-text-secondary); opacity: .2; }
.author { font-weight: 600; font-size: .9rem; color: var(--color-accent); }

/* ===== Contact ===== */
.contact-form { display: grid; gap: 1rem; max-width: 28rem; margin-inline: auto; margin-top: 1.5rem; }
.contact-form input, .contact-form textarea {
  width: 100%; padding: .8rem 1rem; border: 1px solid var(--color-border-strong);
  border-radius: var(--radius); font-family: inherit; font-size: .95rem;
  background-color: var(--color-surface); color: var(--color-text); transition: var(--transition);
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--color-text-secondary); }
.contact-form input:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
}

/* ===== Footer ===== */
.site-footer { border-top: 1px solid var(--color-border); margin-top: 3rem; }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; font-size: .85rem; color: var(--color-text-secondary); }
.social { display: flex; gap: 1rem; }
.social a { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .5rem; border: 1px solid var(--color-border-strong); color: var(--color-text-secondary); font-weight: 700; font-size: .8rem; }
.social a:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* ===== Responsive ===== */
@media (max-width: 480px) {
  .nav { display: none; }
  .hero-inner, .project-hero { padding-block: 2.5rem; }
  .hero-cta { flex-direction: column; }
}