/* ============================================================
   Slidey — PPTX Maker  •  Design System
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ---------- Tokens ---------- */
:root {
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;

  /* Light theme (default) */
  --bg:        oklch(0.985 0.004 270);
  --bg-elev:   oklch(1 0 0);
  --surface:   oklch(1 0 0);
  --card:      oklch(0.992 0.004 270);
  --card-2:    oklch(0.965 0.006 270);
  --border:    oklch(0.915 0.007 270);
  --border-2:  oklch(0.945 0.006 270);
  --text:      oklch(0.23 0.02 274);
  --text-2:    oklch(0.44 0.02 274);
  --muted:     oklch(0.58 0.016 274);
  --faint:     oklch(0.72 0.012 274);

  --accent:    oklch(0.55 0.205 280);
  --accent-2:  oklch(0.49 0.205 280);
  --accent-soft: oklch(0.94 0.045 280);
  --accent-ink:  oklch(0.40 0.16 280);
  --accent-contrast: oklch(0.99 0.01 280);

  --pink:  oklch(0.62 0.20 12);
  --amber: oklch(0.70 0.16 70);
  --teal:  oklch(0.64 0.13 195);
  --green: oklch(0.64 0.16 150);

  --shadow-sm: 0 1px 2px oklch(0.4 0.05 280 / 0.06), 0 1px 3px oklch(0.4 0.05 280 / 0.05);
  --shadow-md: 0 4px 14px oklch(0.4 0.06 280 / 0.08), 0 2px 6px oklch(0.4 0.05 280 / 0.05);
  --shadow-lg: 0 18px 50px oklch(0.4 0.08 280 / 0.14), 0 6px 18px oklch(0.4 0.06 280 / 0.08);
  --shadow-xl: 0 40px 90px oklch(0.35 0.1 280 / 0.20);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  --maxw: 1200px;
  --nav-h: 68px;
}

html[data-theme='dark'] {
  --bg:        oklch(0.165 0.014 274);
  --bg-elev:   oklch(0.205 0.016 274);
  --surface:   oklch(0.205 0.016 274);
  --card:      oklch(0.225 0.017 274);
  --card-2:    oklch(0.255 0.018 274);
  --border:    oklch(0.305 0.018 274);
  --border-2:  oklch(0.275 0.017 274);
  --text:      oklch(0.965 0.005 274);
  --text-2:    oklch(0.80 0.012 274);
  --muted:     oklch(0.66 0.015 274);
  --faint:     oklch(0.52 0.015 274);

  --accent:    oklch(0.70 0.17 282);
  --accent-2:  oklch(0.76 0.16 282);
  --accent-soft: oklch(0.32 0.09 282);
  --accent-ink:  oklch(0.86 0.10 282);
  --accent-contrast: oklch(0.16 0.02 282);

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4);
  --shadow-md: 0 6px 20px oklch(0 0 0 / 0.45);
  --shadow-lg: 0 22px 60px oklch(0 0 0 / 0.55);
  --shadow-xl: 0 40px 90px oklch(0 0 0 / 0.65);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background .35s ease, color .35s ease;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea { font-family: inherit; }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; color: var(--text); }
::selection { background: var(--accent); color: var(--accent-contrast); }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  padding: 11px 18px; border-radius: var(--r-pill);
  transition: transform .12s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
  white-space: nowrap; line-height: 1;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--accent); color: var(--accent-contrast); box-shadow: 0 6px 18px oklch(0.55 0.2 280 / 0.30); }
.btn-primary:hover { background: var(--accent-2); box-shadow: 0 10px 26px oklch(0.55 0.2 280 / 0.40); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--card-2); border-color: var(--faint); }
.btn-soft { background: var(--accent-soft); color: var(--accent-ink); }
.btn-soft:hover { filter: brightness(0.97); }
.btn-lg { padding: 14px 24px; font-size: 16px; }
.btn-sm { padding: 8px 13px; font-size: 13.5px; }
.btn-block { width: 100%; }

/* ---------- Icon button ---------- */
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-md);
  color: var(--text-2); border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.iconbtn:hover { background: var(--card-2); color: var(--text); }
.iconbtn svg { width: 19px; height: 19px; }

/* ---------- Theme + Lang controls ---------- */
.seg {
  display: inline-flex; align-items: center; background: var(--card-2);
  border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px;
}
.seg button {
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: var(--muted); padding: 6px 11px; border-radius: var(--r-pill);
  transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}
.seg button.active { color: var(--text); background: var(--surface); box-shadow: var(--shadow-sm); }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-pill);
  background: var(--card-2); border: 1px solid var(--border); color: var(--text-2);
  transition: background .18s ease, color .18s ease, transform .3s ease;
}
.theme-toggle:hover { color: var(--text); }
.theme-toggle .sun { display: none; }
html[data-theme='dark'] .theme-toggle .sun { display: block; }
html[data-theme='dark'] .theme-toggle .moon { display: none; }

/* ---------- Pills / chips ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent-soft);
  padding: 6px 13px; border-radius: var(--r-pill);
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* Utility */
.mono { font-family: 'Space Grotesk', monospace; }
[hidden] { display: none !important; }