/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Variables ─────────────────────────────────────────────── */
:root {
  /* Brand */
  --color-primary:         #4c014a;   /* purple – accent / language btn */
  --color-primary-hover:   #2d0029;
  --color-primary-pink:    #4c014a;   /* legacy alias */

  --color-action:          #10b981;
  --color-action-hover:    #059669;
  --color-action-active:   #047857;
  --color-action-gradient: linear-gradient(90deg, #10b981, #34d399);
  --color-action-gradient-hover: linear-gradient(90deg, #059669, #10b981);
  --color-secondary-green: #10b981;   /* legacy alias */

  /* Neutrals */
  --color-text-dark:       #1f2937;
  --color-text-muted:      #6b7280;
  --color-background:      #f3f4f6;
  --color-surface:         #ffffff;
  --color-border:          #e5e7eb;
  --color-hover-gray:      #e5e7eb;

  /* Radii */
  --radius:                6px;
  --radius-lg:             10px;
  --radius-full:           9999px;

  /* Shadows */
  --shadow-sm:             0 1px 3px rgba(0, 0, 0, 0.07);
  --shadow-base:           0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-md:             0 6px 14px rgba(0, 0, 0, 0.10);
  --button-shadow:         0 4px 8px rgba(0, 0, 0, 0.10);
}

[data-theme="dark"] {
  --color-primary:         #d946ef;
  --color-primary-hover:   #a21caf;
  --color-primary-pink:    #d946ef;

  --color-action:          #10b981;
  --color-action-hover:    #34d399;
  --color-action-active:   #059669;
  --color-action-gradient: linear-gradient(90deg, #10b981, #34d399);
  --color-action-gradient-hover: linear-gradient(90deg, #059669, #10b981);
  --color-secondary-green: #10b981;

  --color-text-dark:       #f3f4f6;
  --color-text-muted:      #9ca3af;
  --color-background:      #1f2937;
  --color-surface:         #374151;
  --color-border:          #4b5563;
  --color-hover-gray:      #4b5563;

  --shadow-sm:             0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-base:           0 4px 6px rgba(0, 0, 0, 0.25);
  --shadow-md:             0 6px 14px rgba(0, 0, 0, 0.35);
  --button-shadow:         0 4px 8px rgba(0, 0, 0, 0.30);

  --switch-translate:      26px;
}

/* ── Base ──────────────────────────────────────────────────── */
html, body {
  height: 100%;
  background-color: var(--color-background);
  font-family: Roboto, Arial, sans-serif;
  color: var(--color-text-dark);
  transition: background-color 0.3s, color 0.3s;
}

p {
  font-family: Roboto, Arial, sans-serif;
  color: var(--color-text-dark);
}

h1, h2, h3, h4, h5, h6 {
  font-family: Roboto, Arial, sans-serif;
  color: var(--color-text-dark);
}

button:focus {
  outline: none;
  box-shadow: none;
}

/* ── Layout ────────────────────────────────────────────────── */
.body-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
}

/* ── SVG icons ─────────────────────────────────────────────── */
.svg {
  color: var(--color-text-dark);
  width: 24px;
  height: 24px;
  margin-bottom: 5px;
}
.svg-color    { fill: var(--color-text-dark); }
.svg-color-bg { fill: var(--color-background); }

/* ── Divider ───────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--color-border);
  margin: 4px 0;
}

/* ── Shared checkbox ───────────────────────────────────────── */
.checkmark-box {
  display: inline-block;
  height: 20px;
  width: 20px;
  background-color: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  margin-right: 8px;
  transition: all 0.2s ease;
  position: relative;
  vertical-align: middle;
}
.checkmark-box::after {
  content: "";
  position: absolute;
  display: none;
  left: 6px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}