/* looks.css — A Girl & Her Futures™
 *
 * Appearance: colour (pink | teal) × mode (light | dark), set on <html> by
 * shared/looks.js. The brand variables from tokens.css are set here; every
 * other colour is a token in looks-tokens.css, written by tools/build-looks.py.
 * Pink + light is the default look and needs nothing from this file.
 */

/* ── Teal: AGHF teal-blue in place of pink ───────────────────────────── */
html[data-color="teal"]{
  --pink:#3AA6B3;--pink-light:#A8DCE3;--pink-pale:#E2F3F5;
  --peach:#4A8FD0;--peach-light:#B8D3F0;--peach-pale:#E6EFFA;
  /* pink was also "down" (bearish, losses): down turns coral so it never matches up's teal */
  --down:#EE7C6E;--down-light:#F6B5AC;--down-pale:#FCE7E4;
}

/* ── Dark: light surfaces go deep, dark text goes light ──────────────── */
html[data-mode="dark"]{
  color-scheme:dark;
  --warm:#141018;--cream:#1A151F;--bg:#262030;
  --dark:#F6ECE8;--text:#E6DAD4;--muted:#B5A6AF;
  --border:#352B3D;--placeholder:#7D6E78;
  --pink-pale:#3A1F2B;--teal-pale:#123230;--peach-pale:#33261A;--purple-pale:#24223E;
  --pink-light:#7A3A4C;--teal-light:#2C6B64;--peach-light:#6B4A26;--purple-light:#4A4580;
  /* dark chips and buttons (background: the text colour) stay dark, raised above cards */
  --ink-bg:#3A3044;--ink-fg:#F6ECE8;
}
html[data-mode="dark"][data-color="teal"]{
  --warm:#10141A;--cream:#131A22;--bg:#1E2833;--border:#28364A;
  --pink-pale:#12303A;--pink-light:#24606B;--peach-pale:#15263A;--peach-light:#2B4D73;
  --down-pale:#3A2220;--down-light:#7A3A34;
  --ink-bg:#2A3A4C;
}
html[data-mode="dark"] body{
  background:
    radial-gradient(55% 40% at 8% 0%, rgba(244,130,154,.12) 0%, transparent 70%),
    radial-gradient(45% 35% at 100% 8%, rgba(126,206,196,.08) 0%, transparent 70%),
    var(--warm);
}
html[data-mode="dark"][data-color="teal"] body{
  background:
    radial-gradient(55% 40% at 8% 0%, rgba(58,176,166,.14) 0%, transparent 70%),
    radial-gradient(45% 35% at 100% 8%, rgba(74,143,208,.12) 0%, transparent 70%),
    var(--warm);
}
/* Photos and drawn art keep their own colours. */
html[data-mode="dark"] img{color-scheme:light}

/* ── The Appearance card (shared/appearance-ui.js) ───────────────────── *
 * Lives here, outside the token build, so each swatch keeps its own colour
 * whatever look is on. */
.ap-row{margin-top:18px}
.ap-label{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ap-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ap-opts.ap-mode{grid-template-columns:repeat(3,minmax(0,1fr))}
.ap-opt{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;padding:12px 10px;border-radius:16px;border:1.5px solid var(--border);background:var(--bg-ffffff,#fff);color:var(--dark);font:700 14px var(--font-body);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}
.ap-opt span:last-child{text-align:center;line-height:1.25}
.ap-opt:hover{border-color:var(--pink-light)}
.ap-opt.on{border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-pale)}
.ap-opt:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.ap-face{width:64px;height:64px;border-radius:50%;overflow:hidden;display:block;background:#FDE8ED}
.ap-face[data-face-of="astro"]{background:#E2F3F5}
.ap-sw{display:block;width:100%;height:30px;border-radius:10px}
.ap-opts.ap-skin{grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.ap-skin .ap-opt{padding:10px 4px;font-size:12.5px;gap:6px}
.ap-tone{display:block;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6),0 2px 6px rgba(44,24,16,.15)}
.ap-tone-auto{background:conic-gradient(#C68E62 0 50%,#8A5338 50% 100%)}
.ap-tone-fair{background:#F1D0B8}.ap-tone-light{background:#E2B48F}.ap-tone-golden{background:#C68E62}
.ap-tone-brown{background:#A86B4C}.ap-tone-deep{background:#8A5338}.ap-tone-rich{background:#5E3725}
@media(max-width:560px){.ap-opts.ap-skin{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ap-sw-pink{background:linear-gradient(90deg,#F4829A,#F5A857)}
.ap-sw-teal{background:linear-gradient(90deg,#3AB0A6,#4A8FD0)}
.ap-sw-light{background:#FFFBF9;box-shadow:inset 0 0 0 1px #EADDD6}
.ap-sw-dark{background:#141018;box-shadow:inset 0 0 0 1px #3A3040}
.ap-sw-auto{background:linear-gradient(90deg,#FFFBF9 50%,#141018 50%);box-shadow:inset 0 0 0 1px #CFC2BB}
@media(max-width:420px){.ap-opt{padding:10px 6px;font-size:13px}.ap-face{width:54px;height:54px}}

/* ── Chart paper (game-charts.js SVG; clean-candles.js reads the mode itself) ── */
html[data-mode="dark"]{--chart-paper:#1C1722;--chart-grid:rgba(255,255,255,.06);--chart-ink:#F6ECE8;--chart-muted:#B5A6AF}
html[data-mode="dark"][data-color="teal"]{--chart-paper:#16202A}

/* Pastel cover art (Academy phase cards, game thumbnails) sits softer on a dark page. */
html[data-mode="dark"] .pc-art,html[data-mode="dark"] .gm-thumb{filter:brightness(.8) saturate(.92)}