/* T117 — looks.css: two alternative visual worlds, Cobalt and Nocturne, each redefining every
   token style.css declares in its :root (Ember, the default, lives there — this file never
   touches it). Loaded on every page right after style.css (and, on landing.html/login.html,
   right after their own inline <style> block) so an element written as var(--token) anywhere in
   this app repaints automatically the moment look.js sets/removes document.documentElement's
   data-look attribute — no page markup or script needs to know a look exists.

   Values are the PM's own literal definitions from tasks.yaml's T117 entry, unmodified. Font
   @imports for both looks live here (not in style.css, which only ever needed Sora) so a page
   that never switches away from Ember never pays for fonts it doesn't use. */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&family=Inter:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700&family=Manrope:wght@400;500;600&display=swap');

/* ------------------------------------------------------------------------------------------- */
/* COBALT — deep navy with a sky-blue accent (founder, 2026-09-15: "try something with the       */
/* color blue"; a lighter paper look was tried and rejected first).                              */
/* ------------------------------------------------------------------------------------------- */
:root[data-look="cobalt"] {
  --bg: #0d1b2a;
  --surface: #14273b;
  --surface-2: #1b324a;
  --border: #2a4a66;
  --text: #e6f0fa;
  --muted: #92abc2;
  --accent: #38bdf8;
  --accent-strong: #0ea5e9;
  --accent-hover: #7dd3fc;
  --accent-soft: rgba(56, 189, 248, 0.16);
  --on-accent: #06283d;
  --ok: #4ade80;
  --ok-strong: #22c55e;
  --warn: #fbbf24;
  --warn-strong: #d97706;
  --shadow: 0 6px 20px rgba(3, 20, 40, 0.45);
  --shadow-soft: 0 10px 32px rgba(3, 20, 40, 0.55);
  /* T126: --shadow's wide blur trips gpt-thin-border-wide-shadow on a 1px-border tile
     (landing.html's .category) — a tight elevation for thin-border tiles, this look's own colour. */
  --shadow-tile: 0 2px 6px rgba(3, 20, 40, 0.35);
  --radius: 12px;
  --radius-sm: calc(var(--radius) * 0.6);
  --focus-ring: var(--accent);
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Medium-tag and provider-badge colours are deliberately unchanged across looks (see
     style.css's own T117 comment) — they identify a category/brand, not the site's theme.
     Redefined here anyway (same values) so this block is a complete, self-contained token set —
     every token style.css's :root declares, per this task's own acceptance criterion. */
  --medium-games: #7cc4ff;
  --medium-movies: #ff9f6e;
  --medium-books: #c9b6ff;
  --medium-audiobooks: #ffd166;
  --medium-anime: #ff7eb6;
  --medium-manga: #9ae6b4;
  --provider-tmdb: #01b4e4;
  --provider-anilist: #02a9ff;
  --provider-igdb: #9147ff;
  --provider-audible: #f8991c;
  --provider-openlibrary: #e1a12a;

  /* Type scale is unchanged across looks (a font swap, not a size swap) — redefined here for the
     same "complete token set per look" reason as the medium/provider colours above. */
  --fs-1: 24px;
  --fs-2: 19px;
  --fs-3: 16px;
  --fs-4: 14px;
  --fs-5: 12.5px;
  --fs-6: 11px;
}

/* Cobalt signature: a faint top-to-bottom background gradient on the page itself — cheap, pure
   CSS, gives the "deep water" feel the navy palette is going for without touching any component. */
:root[data-look="cobalt"] body {
  background: linear-gradient(180deg, #0d1b2a 0%, #0a1521 100%);
}

/* ------------------------------------------------------------------------------------------- */
/* NOCTURNE — blue-black with a neon violet glow (founder: "I like the neon idea").              */
/* ------------------------------------------------------------------------------------------- */
:root[data-look="nocturne"] {
  --bg: #0a0d18;
  --surface: #121629;
  --surface-2: #1a1f3a;
  --border: #2a3158;
  --text: #eceefb;
  --muted: #9aa2c9;
  --accent: #b388ff;
  --accent-strong: #9b6dff;
  --accent-hover: #c9adff;
  --accent-soft: rgba(179, 136, 255, 0.18);
  --on-accent: #14092b;
  --ok: #5ce0b8;
  --ok-strong: #34c99e;
  --warn: #ffd166;
  --warn-strong: #e0a800;
  --shadow: 0 0 0 1px rgba(179, 136, 255, 0.25), 0 8px 28px rgba(155, 109, 255, 0.22);
  --shadow-soft: 0 0 0 1px rgba(179, 136, 255, 0.3), 0 14px 40px rgba(155, 109, 255, 0.3);
  /* T126: --shadow's wide blur trips gpt-thin-border-wide-shadow on a 1px-border tile
     (landing.html's .category) — a tight elevation for thin-border tiles, this look's own colour. */
  --shadow-tile: 0 2px 6px rgba(3, 6, 20, 0.45);
  --radius: 14px;
  --radius-sm: calc(var(--radius) * 0.6);
  --focus-ring: var(--accent);
  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Same "complete token set per look" reasoning as the Cobalt block above — medium/provider
     colours and the type scale are deliberately unchanged across looks, redefined here anyway. */
  --medium-games: #7cc4ff;
  --medium-movies: #ff9f6e;
  --medium-books: #c9b6ff;
  --medium-audiobooks: #ffd166;
  --medium-anime: #ff7eb6;
  --medium-manga: #9ae6b4;
  --provider-tmdb: #01b4e4;
  --provider-anilist: #02a9ff;
  --provider-igdb: #9147ff;
  --provider-audible: #f8991c;
  --provider-openlibrary: #e1a12a;
  --fs-1: 24px;
  --fs-2: 19px;
  --fs-3: 16px;
  --fs-4: 14px;
  --fs-5: 12.5px;
  --fs-6: 11px;
}

/* Nocturne signature: a subtle accent glow on primary buttons and focused inputs — the one
   authored motion/atmosphere moment for this look, cheap and purely CSS (box-shadow only). */
:root[data-look="nocturne"] button:not(.clear-btn):not(.edit-btn):not(.cancel-edit-btn):not(.skip-rating-btn):not(.cancel-status-btn):not(.btn-quiet) {
  box-shadow: 0 0 0 1px rgba(179, 136, 255, 0.35), 0 0 18px rgba(179, 136, 255, 0.35);
}
:root[data-look="nocturne"] input[type="text"]:focus,
:root[data-look="nocturne"] input[type="date"]:focus,
:root[data-look="nocturne"] input[type="number"]:focus,
:root[data-look="nocturne"] input[type="email"]:focus,
:root[data-look="nocturne"] input[type="password"]:focus,
:root[data-look="nocturne"] select:focus,
:root[data-look="nocturne"] textarea:focus {
  box-shadow: 0 0 0 3px var(--accent-soft), 0 0 14px rgba(179, 136, 255, 0.3);
}