/* Shared design tokens for the A1 reading app -- single source of truth so
   the dashboard and every passage page render as one visual system.
     --rule      wine/aubergine   French text, primary actions, structure --
                                  a fountain-pen ink, not a SaaS blue
     --muted     grey             the English gloss -- secondary, always legible
     --gold      warm ochre       in progress / awaiting review
     --success   green            done / correct
     --marge     red              needs review (the cahier's margin line)
   Each color has exactly one job everywhere it's used -- no decorative-only
   hue: the hero gradient is --rule -> --gold, reusing the semantic set
   rather than inventing a sixth color with no meaning of its own.
   Dark background is Notion's #191919, one step lighter for --card so
   elevated surfaces still read as elevated against it. */
:root {
  --paper:        #FAF9F6;
  --card:         #FFFFFF;
  --ink:          #16181F;
  --muted:        #565D70;
  --faint:        #838A9B;
  --rule:         #7A2F5C;
  --rule-soft:    #F4E8EF;
  --gold:         #8A6B12;
  --gold-soft:    #FAF3E0;
  --success:      #1F6B4D;
  --success-soft: #E4F3EC;
  --marge:        #A93226;
  --marge-soft:   #FBEBE9;
  --field:        #FFFFFF;
  --field-line:   #C9CDDA;
  --shadow:       0 1px 2px rgba(22,24,31,.05), 0 8px 24px rgba(22,24,31,.06);
  --shadow-lg:    0 4px 8px rgba(22,24,31,.06), 0 16px 40px rgba(22,24,31,.10);
  --radius-sm:    8px;
  --radius-md:    14px;
  --radius-lg:    20px;
  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --sans:  "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #191919;
    --card:         #202020;
    --ink:          #EDEBE4;
    --muted:        #A8AEC0;
    --faint:        #757C90;
    --rule:         #E0A3C6;
    --rule-soft:    #322530;
    --gold:         #D9B45B;
    --gold-soft:    #2E2717;
    --success:      #5FCFA0;
    --success-soft: #1B3327;
    --marge:        #E8837A;
    --marge-soft:   #33211F;
    --field:        #242424;
    --field-line:   #3A3A3A;
    --shadow:       0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
    --shadow-lg:    0 4px 10px rgba(0,0,0,.35), 0 20px 48px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"] {
  --paper:        #191919;
  --card:         #202020;
  --ink:          #EDEBE4;
  --muted:        #A8AEC0;
  --faint:        #757C90;
  --rule:         #E0A3C6;
  --rule-soft:    #322530;
  --gold:         #D9B45B;
  --gold-soft:    #2E2717;
  --success:      #5FCFA0;
  --success-soft: #1B3327;
  --marge:        #E8837A;
  --marge-soft:   #33211F;
  --field:        #242424;
  --field-line:   #3A3A3A;
  --shadow:       0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  --shadow-lg:    0 4px 10px rgba(0,0,0,.35), 0 20px 48px rgba(0,0,0,.3);
}

/* ---- accent palettes ----
   The bare :root/dark values above ARE the "aubergine" palette (the
   default) -- no attribute needed for it. These two options only override
   --rule/--rule-soft; every semantic color (gold/success/marge/paper/ink)
   stays identical across palettes, so picking one is purely "which brand
   accent," never a change to what any color means. */
:root[data-palette="ocean"] { --rule: #3D53A0; --rule-soft: #E8EBF6; }
:root[data-palette="slate"] { --rule: #414D63; --rule-soft: #EAEDF2; }
@media (prefers-color-scheme: dark) {
  :root[data-palette="ocean"]:not([data-theme="light"]) { --rule: #9AAAE8; --rule-soft: #262C3D; }
  :root[data-palette="slate"]:not([data-theme="light"]) { --rule: #A6B0C6; --rule-soft: #2A2E38; }
}
:root[data-palette="ocean"][data-theme="dark"] { --rule: #9AAAE8; --rule-soft: #262C3D; }
:root[data-palette="slate"][data-theme="dark"] { --rule: #A6B0C6; --rule-soft: #2A2E38; }

* { box-sizing: border-box; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

.en {
  font-family: var(--sans); font-style: italic; font-weight: 400;
  color: var(--muted); font-size: .85em; line-height: 1.5;
}

.btn {
  font-family: var(--sans); font-size: .92rem; font-weight: 600;
  background: var(--rule); color: #FFFFFF; border: none; border-radius: var(--radius-sm);
  padding: .8rem 1.6rem; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: baseline; gap: .5rem;
  box-shadow: var(--shadow); transition: filter .15s, transform .15s;
}
.btn .en { color: rgba(255,255,255,.75); }
.btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn[disabled] { opacity: .5; cursor: default; filter: none; transform: none; }
.btn.ghost {
  background: transparent; color: var(--rule); border: 1.5px solid var(--rule-soft);
  box-shadow: none;
}
.btn.ghost:hover { background: var(--rule-soft); transform: none; }
/* A consequential action, not an error. --marge normally means "needs
   review"; this deliberately extends it to "look twice", because this button
   closes a chapter and moves you on and it was being clicked by accident
   while it looked EXACTLY like the primary one beside it. The .en override
   is required: .btn .en is white-on-fill, which is invisible here. */
.btn.caution {
  background: transparent; color: var(--marge);
  border: 1.5px solid var(--marge); box-shadow: none;
}
.btn.caution .en { color: var(--marge); opacity: .75; }
.btn.caution:hover { background: var(--marge-soft); filter: none; transform: none; }

/* An API call failed or a key is missing. --marge is the "needs review"
   token, and an unusable key is exactly that: something to go and fix.
   Shared by the passage page (audio, grading) and the dashboard (generation)
   so every failure looks the same wherever it surfaces. */
.api-warning {
  background: var(--marge-soft); border-left: 3px solid var(--marge);
  border-radius: 2px; padding: .8rem 1rem;
  font-family: var(--sans); font-size: .85rem; line-height: 1.5;
  color: var(--marge);
}
.api-warning .en { display: block; color: inherit; opacity: .75; }
.api-warning[hidden] { display: none; }

/* Accent input, shared by every page with a French text field (see
   /accents.js): a click palette mirroring the TEF's on-screen keyboard,
   plus suffix dead keys. */
.accent-bar {
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
  background: var(--card); border: 1px solid var(--field-line);
  border-radius: 999px; padding: .35rem .5rem; align-self: flex-start;
  box-shadow: var(--shadow);
}
.accent-bar[hidden] { display: none; }
.accent-key {
  font-family: var(--serif); font-size: 1rem; line-height: 1;
  min-width: 1.9rem; height: 1.9rem; padding: 0 .3rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rule-soft); color: var(--rule);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer;
}
.accent-key:hover { border-color: var(--rule); }
.accent-key:focus-visible { outline: 2px solid var(--rule); outline-offset: 2px; }
.accent-hint {
  font-family: var(--sans); font-size: .68rem; color: var(--faint);
  padding-left: .3rem; white-space: nowrap;
}
@media (max-width: 30rem) { .accent-hint { display: none; } }

.theme-toggle {
  position: fixed; top: 1rem; right: 1rem; z-index: 20;
  width: 2.6rem; height: 2.6rem; display: flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--field-line); border-radius: 999px;
  box-shadow: var(--shadow); cursor: pointer; font-size: 1.15rem; color: var(--ink);
}
.theme-toggle:hover { border-color: var(--rule); }

/* ---- palette picker: a row of swatches next to the theme toggle ----
   Each swatch shows its OWN palette's accent (a fixed literal color, not
   var(--rule)) so all options stay visible regardless of which is active --
   using var(--rule) here would make every swatch just show the current pick. */
.palette-picker {
  position: fixed; top: 1rem; right: 4.1rem; z-index: 20;
  display: flex; align-items: center; gap: .4rem;
  background: var(--card); border: 1px solid var(--field-line); border-radius: 999px;
  padding: .5rem .6rem; box-shadow: var(--shadow);
}
.palette-swatch {
  width: 1.3rem; height: 1.3rem; border-radius: 999px; padding: 0; cursor: pointer;
  border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.palette-swatch:hover { transform: scale(1.12); }
.palette-swatch.active { border-color: var(--ink); }
.palette-swatch[data-palette="aubergine"] { background: #7A2F5C; }
.palette-swatch[data-palette="ocean"] { background: #3D53A0; }
.palette-swatch[data-palette="slate"] { background: #414D63; }

@media (max-width: 480px) {
  .palette-picker { right: .8rem; top: 4.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}