/* === ChessIA — Design system === */

:root {
  /* Color tokens — dark theme by default */
  --c-bg:         #0f0f12;
  --c-bg-alt:     #16161a;
  --c-card:       #1a1a1f;
  --c-card-hover: #1f1f25;
  --c-accent:     #222228;
  --c-fg:         #e0e0e6;
  --c-fg-strong:  #f4f4f8;
  --c-fg-dim:     #8a8a95;
  --c-fg-mute:    #5e5e68;
  --c-border:     #2a2a33;
  --c-border-strong: #3a3a45;

  /* Semantic */
  --c-primary:    #7aa9e0;
  --c-primary-bg: #2c5282;
  --c-success:    #68c38a;
  --c-warning:    #e5a34c;
  --c-danger:     #e26870;
  --c-info:       #7aa9e0;

  /* Severity (accordés au rapport + chart) */
  --c-sev-blunder:     #e26870;
  --c-sev-mistake:     #e5a34c;
  --c-sev-inaccuracy:  #6aa6d6;
  --c-sev-missed:      #b673cb;
  --c-sev-brilliant:   #58c48c;

  /* Spacing scale (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Typography */
  --ff-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ff-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.35rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --lh-tight: 1.2;
  --lh-body: 1.55;
  --lh-loose: 1.7;

  /* Radius */
  --r-1: 3px;
  --r-2: 6px;
  --r-3: 10px;
  --r-pill: 999px;

  /* Shadow */
  --sh-1: 0 1px 2px rgba(0,0,0,0.3);
  --sh-2: 0 2px 8px rgba(0,0,0,0.4);
  --sh-3: 0 4px 16px rgba(0,0,0,0.5);

  /* Transitions */
  --tr-fast: 120ms ease;
  --tr-base: 200ms ease;

  /* Lichess PGN viewer tokens (override lpv dark) */
  --c-lpv-bg: var(--c-card);
  --c-lpv-bg-box: var(--c-card);
  --c-lpv-font: var(--c-fg);
  --c-lpv-font-shy: var(--c-fg-dim);
  --c-lpv-border: var(--c-border);
  --c-lpv-past-moves: var(--c-fg-dim);
}

/* === Light theme override === */

:root[data-theme="light"] {
  --c-bg:         #fafaf8;
  --c-bg-alt:     #f2f2ee;
  --c-card:       #ffffff;
  --c-card-hover: #f8f8f4;
  --c-accent:     #ededea;
  --c-fg:         #1a1a1f;
  --c-fg-strong:  #0a0a0f;
  --c-fg-dim:     #65656d;
  --c-fg-mute:    #9a9aa3;
  --c-border:     #e0e0da;
  --c-border-strong: #c5c5bf;

  --c-primary:    #2d5f9e;
  --c-primary-bg: #e4edf7;

  --c-sev-blunder:     #c13744;
  --c-sev-mistake:     #c67316;
  --c-sev-inaccuracy:  #2d6fa0;
  --c-sev-missed:      #8e4ba5;
  --c-sev-brilliant:   #1f8a55;

  --sh-1: 0 1px 2px rgba(0,0,0,0.08);
  --sh-2: 0 2px 8px rgba(0,0,0,0.08);
  --sh-3: 0 4px 16px rgba(0,0,0,0.12);
}

/* === Base layout === */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ff-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  background: var(--c-bg);
  color: var(--c-fg);
  max-width: 1150px;
  margin: var(--sp-5) auto;
  padding: 0 var(--sp-4);
  transition: background var(--tr-base), color var(--tr-base);
}

/* === Navigation top === */

nav.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  border-bottom: 2px solid var(--c-border-strong);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-5);
}

nav.top-nav h1 {
  margin: 0;
  font-size: var(--fs-2xl);
  color: var(--c-fg-strong);
  line-height: var(--lh-tight);
  border: none;
  padding: 0;
}

nav.top-nav .version {
  color: var(--c-fg-mute);
  font-size: var(--fs-xs);
  font-weight: normal;
  margin-left: var(--sp-2);
  font-family: var(--ff-mono);
  vertical-align: middle;
}

nav.top-nav .nav-actions { display: flex; gap: var(--sp-3); align-items: center; }

nav.top-nav a {
  color: var(--c-primary);
  text-decoration: none;
  font-size: var(--fs-sm);
  white-space: nowrap;
}
nav.top-nav a:hover { text-decoration: underline; }

/* === Theme toggle === */

.theme-toggle {
  background: none;
  border: 1px solid var(--c-border);
  color: var(--c-fg-dim);
  cursor: pointer;
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-xs);
  font-family: var(--ff-mono);
  border-radius: var(--r-2);
  transition: var(--tr-fast);
}
.theme-toggle:hover {
  color: var(--c-fg);
  border-color: var(--c-border-strong);
}

/* === Headings === */

h1, h2, h3 { color: var(--c-fg-strong); font-weight: 600; }
h2 {
  margin-top: var(--sp-6);
  font-size: var(--fs-xl);
  border-bottom: 1px solid var(--c-border);
  padding-bottom: var(--sp-2);
}
h3 { font-size: var(--fs-lg); }

/* === Forms === */

input[type="text"], input[type="number"], input[type="tel"], input[type="email"],
select, textarea {
  background: var(--c-card);
  color: var(--c-fg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2);
  padding: var(--sp-2) var(--sp-3);
  font-family: inherit;
  font-size: var(--fs-md);
  width: 100%;
  transition: border-color var(--tr-fast);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 2px rgba(122, 169, 224, 0.15);
}

button {
  font-family: inherit;
  font-size: var(--fs-md);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-2);
  cursor: pointer;
  transition: var(--tr-fast);
}

button[type="submit"], button.primary {
  background: var(--c-primary-bg);
  color: #fff;
  border: 1px solid var(--c-primary-bg);
}
button[type="submit"]:hover, button.primary:hover { filter: brightness(1.15); }

button.secondary {
  background: transparent;
  color: var(--c-fg);
  border: 1px solid var(--c-border-strong);
}
button.secondary:hover { background: var(--c-card-hover); }

button.danger {
  background: transparent;
  color: var(--c-danger);
  border: 1px solid var(--c-border-strong);
}
button.danger:hover { border-color: var(--c-danger); }

button:disabled { opacity: 0.55; cursor: not-allowed; }

label {
  display: block;
  margin-bottom: var(--sp-3);
}
label > span {
  display: block;
  font-size: var(--fs-sm);
  color: var(--c-fg-dim);
  margin-bottom: var(--sp-1);
}

.hint {
  color: var(--c-fg-dim);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  margin: var(--sp-2) 0 var(--sp-4);
}
.hint strong { color: var(--c-fg); font-weight: 500; }

/* === Utility === */

.sub { color: var(--c-fg-dim); font-size: var(--fs-sm); }
.mono { font-family: var(--ff-mono); }
.err { color: var(--c-danger); }
.hidden { display: none !important; }

/* === Footer === */

footer.app-footer {
  color: var(--c-fg-mute);
  font-size: var(--fs-xs);
  text-align: center;
  padding: var(--sp-6) 0 var(--sp-3);
  border-top: 1px solid var(--c-border);
  margin-top: var(--sp-7);
}

/* === Responsive : tablette (≤ 900px) === */
@media (max-width: 900px) {
  body { margin: var(--sp-3) auto; padding: 0 var(--sp-3); }
  nav.top-nav {
    padding-bottom: var(--sp-2);
    margin-bottom: var(--sp-4);
    flex-wrap: wrap;
    gap: var(--sp-2);
  }
  nav.top-nav h1 { font-size: var(--fs-xl); }
  nav.top-nav .nav-actions { flex-wrap: wrap; gap: var(--sp-2); }
  h2 { font-size: var(--fs-lg); margin-top: var(--sp-5); }
}

/* === Responsive : mobile (≤ 560px) === */
@media (max-width: 560px) {
  body { margin: var(--sp-2) auto; padding: 0 var(--sp-3); font-size: 0.95rem; }
  nav.top-nav h1 { font-size: var(--fs-lg); }
  nav.top-nav .version { display: block; margin-left: 0; margin-top: var(--sp-1); }
  nav.top-nav a, .theme-toggle { font-size: var(--fs-xs); }
  h2 { font-size: var(--fs-md); }
  .hint { font-size: var(--fs-xs); }
}