/* ── ClashRooms Generators · Shared Theme ──
   Single source of truth for design tokens. Change a value here and all
   four pages (chooser + 3 tools) update on next deploy. */

:root {
  /* Brand */
  --persian: #193DCA;
  --persian-l: #4A6BE0;
  --persian-d: #0F2A8C;
  --raspberry: #DF1550;
  --raspberry-l: #FF477E;
  --raspberry-d: #B30E3F;
  --jonquil: #F9CB08;
  --jonquil-l: #FDE047;

  /* Neutrals */
  --alice: #F0F5FF;
  --penn: #000F4C;
  --white: #FFFFFF;
  --line: #D9E1F2;
  --line-strong: #BFCBE8;
  --muted: #6B7280;
  --text: #0B1437;

  /* Gradients */
  --grad-blue: linear-gradient(135deg, #4A6BE0 0%, #193DCA 100%);
  --grad-red: linear-gradient(135deg, #FF477E 0%, #DF1550 100%);
  --grad-yellow: linear-gradient(135deg, #FDE047 0%, #F9CB08 100%);

  /* Shape */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 20px;

  /* Shadows (subtle blue tint, matches mobiel + GM) */
  --shadow: 0 4px 14px rgba(25, 61, 202, 0.08);
  --shadow-lift: 0 10px 28px rgba(25, 61, 202, 0.14);
  --shadow-strong: 0 16px 40px rgba(0, 15, 76, 0.18);

  /* Typography */
  --font-display: 'Lexend Deca', sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Reset ── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

/* ── Base ── */
body {
  background: var(--alice);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6, .title {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  color: var(--penn);
  font-weight: 700;
}

/* ── Section title (sidebar headings) ── */
.section-title {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--raspberry);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 10px;
}

/* ── Card ── */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.15s, opacity 0.15s;
  text-decoration: none;
}
.btn:hover { opacity: 0.92; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary   { background: var(--grad-blue); color: var(--white); box-shadow: var(--shadow); }
.btn-accent    { background: var(--grad-red); color: var(--white); box-shadow: var(--shadow); }
.btn-warn      { background: var(--jonquil); color: var(--penn); }
.btn-secondary { background: var(--alice); color: var(--persian); border: 1.5px solid var(--persian); }
.btn-ghost     { background: transparent; color: var(--muted); border: 1.5px solid var(--line); }

/* ── Inputs ── */
.input,
textarea.input,
input.input {
  width: 100%;
  background: var(--white);
  color: var(--text);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  transition: border-color 0.15s;
}
.input:focus { outline: 0; border-color: var(--persian); }

/* ── Range slider accent ── */
input[type="range"] { accent-color: var(--persian); }

/* ── Helpers ── */
.muted { color: var(--muted); }
.divider { height: 1px; background: var(--line); margin: 16px 0; border: 0; }