/* ============================================================================
   THEME — the single source of truth for the platform's look
   ----------------------------------------------------------------------------
   THIS IS THE ONLY FILE THAT HOLDS COLOUR LITERALS.

   Everything else in public/css — style.css, design-system.css, the ~120
   per-area stylesheets, the inline <style> blocks in views — must *reference*
   these tokens, never hardcode a hex. Re-theme the whole platform by editing
   the ~30 values in section 1 and nothing else.

   Loaded first, from views/partials/dashboard-header.hbs, so every later
   stylesheet can resolve `var(--surface-page)` and friends.

   Check nothing has drifted:   npm run theme:check
   Full documentation:          docs/DESIGN_SYSTEM.md

   Current theme: Monochrome — black ink on a white page, no brand hue.
   ============================================================================ */

:root {
  /* The page is light, and says so. Without this, a phone in dark mode paints
     the browser's own dark styling into native widgets (inputs, selects,
     scrollbars) and may force-darken the page — which is how form fields ended
     up as black boxes on Android. `only` also opts out of auto-darkening. */
  color-scheme: only light;

  /* ==========================================================================
     1. THE THEME  — edit these to re-skin the entire platform
     ========================================================================== */

  /* --- Surfaces, lightest to deepest ------------------------------------- */
  --surface-page:      #ffffff;   /* the page itself — behind everything */
  --surface-raised:    #f5f5f6;   /* cards, panels, tiles sitting on the page */
  --surface-sunken:    #ebebed;   /* wells, inputs, nested/hover surfaces */
  --surface-overlay:   #ffffff;   /* modals, popovers, menus */
  --surface-veil:      rgba(0, 0, 0, 0.45);  /* the dimmer behind a modal */

  /* --- Ink ---------------------------------------------------------------- */
  --ink:               #000000;   /* body copy, headings */
  --ink-soft:          #4e4e4e;   /* secondary copy */
  --ink-muted:         #737373;   /* labels, timestamps, placeholders */
  --ink-disabled:      #9a9a9a;
  --ink-inverse:       #f6f6f6;   /* ink on top of a dark surface */

  /* --- Brand ---------------------------------------------------------------
     The accent. A brand fill ALWAYS carries --brand-ink as its label. */
  --brand-fill:        #000000;
  --brand-fill-hover:  #1a1a1a;
  --brand-fill-soft:   rgba(0, 0, 0, 0.06);   /* tinted background, e.g. chips */
  --brand-ink:         #f6f6f6;               /* the label on a brand fill */
  /* A softened label on a brand fill, for a CTA meant to read calm rather than
     shouted (the public nav's "Try it free"). Still clears 4.5:1 on
     --brand-fill — the contrast suite checks it. */
  --brand-ink-soft:    #b9b9b9;
  --brand-gradient:       linear-gradient(105deg, #000000 0%, #101010 55%, #252525 120%);
  --brand-gradient-hover: linear-gradient(105deg, #000000 0%, #000000 50%, #151515 118%);

  /* --- Lines -------------------------------------------------------------- */
  --line:              rgba(0, 0, 0, 0.10);
  --line-soft:         rgba(0, 0, 0, 0.06);
  --line-strong:       rgba(0, 0, 0, 0.28);
  --focus-ring:        rgba(0, 0, 0, 0.22);

  /* --- Glass (frosted surfaces) ------------------------------------------- */
  --glass:             rgba(0, 0, 0, 0.035);
  --glass-strong:      rgba(0, 0, 0, 0.07);
  --glass-line:        rgba(0, 0, 0, 0.10);

  /* --- Shadows ------------------------------------------------------------
     Always a dark shadow, regardless of theme — an inverted shadow is a glow
     nobody can see. Only the alpha changes between a light and dark theme. */
  --shadow-sm:         0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md:         0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-lg:         0 20px 50px rgba(0, 0, 0, 0.14);

  /* --- Overlays, scrims and neutral fills -------------------------------
     The rungs between "a surface" and "a line": image scrims, dimmers, the
     mid greys used for placeholders, dividers and decorative fills. */
  --wash:              rgba(0, 0, 0, 0.04);   /* barely-there tint */
  --scrim-soft:        rgba(0, 0, 0, 0.20);   /* light dim over an image */
  --scrim:             rgba(0, 0, 0, 0.45);   /* standard dimmer */
  --scrim-strong:      rgba(0, 0, 0, 0.70);   /* heavy dim, text on photos */
  /* The white-family counterparts of --wash / --glass, for the inside of a
     dark band: a frosted card fill, a chip, a hover state. --veil / --veil-strong
     are the ink-and-border rungs; --veil-wash / --veil-glass are the fills. */
  --veil-wash:         rgba(255, 255, 255, 0.05);  /* frosted card on a dark band */
  --veil-glass:        rgba(255, 255, 255, 0.10);  /* chip / hover on a dark band */
  --veil:              rgba(255, 255, 255, 0.35);  /* light veil over dark art */
  --veil-strong:       rgba(255, 255, 255, 0.85);

  --fill-mid:          #8a8a8f;   /* placeholder / decorative neutral fill */
  --fill-mid-soft:     #b4b4b9;
  --fill-mid-strong:   #5c5c62;

  /* --- Ink laid directly over media --------------------------------------
     Text and icons sitting on a photo (a card footer, a scrim, a hero caption)
     never follow the page's ink: the surface under them is a dark scrim in
     EVERY skin, so they must stay light in every skin too. --on-media-accent
     is the one coloured mark allowed there (stat icons, small glyphs); the
     monochrome skin keeps it neutral, a branded skin lights it up. */
  --on-media-ink:       #ffffff;
  --on-media-ink-soft:  rgba(255, 255, 255, 0.74);
  --on-media-accent:    #e3e3e3;

  /* --- Semantic status -----------------------------------------------------
     Deliberately still coloured: these carry meaning, not brand. A
     destructive action must not look like a safe one. */
  --status-success:    #1e7e34;
  --status-danger:     #c62828;
  --status-warning:    #a27a00;
  --status-info:       #4e4e4e;
  --status-ink:        #ffffff;   /* label on any filled status colour */

  /* ==========================================================================
     2. COMPATIBILITY ALIASES  — do not edit; add here, never redefine above
     --------------------------------------------------------------------------
     Names that predate this file and are used across the app. They resolve to
     the scale above so old and new code stay in sync. Prefer the section-1
     names in anything you write from now on.
     ========================================================================== */

  /* Page-level background names used by inline <style> blocks in views. */
  --dark-bg:           var(--surface-page);
  --darker-bg:         var(--surface-raised);
  --card-bg:           var(--surface-raised);
  --page-bg:           var(--surface-page);
}

/* ============================================================================
   3. PER-BRAND SKIN — ChatLamix (chatlamix.com), the Aurora Glass revival
   ----------------------------------------------------------------------------
   The chat brand wears the dark-purple identity snapshotted in
   design-backup/2026-08-05-aurora-glass/ and revived on
   views/landing-chatlamix.hbs (see docs/CHATLAMIX_BRANDING.md). This block is
   the same token contract as section 1, re-valued, so every aliased stylesheet
   re-skins with it — the same proof theme-dark.css makes, scoped to one brand.

   SCOPE: `html[data-brand="chatlamix"]` — a view opts in by stamping
   `data-brand="{{brand.id}}"` on its <html> tag. It must be the <html> element
   (the same element as `:root`), NOT <body>: the alias layers (section 2 here,
   the :root block of style.css) substitute their var() references at
   computed-value time on the root element, so a body-scoped override would be
   invisible to every alias. Only chat-facing pages opt in; a page that doesn't
   stamp the attribute keeps the monochrome theme on every brand.
   ============================================================================ */

html[data-brand="chatlamix"] {
  /* The page is dark, and native widgets (inputs, selects, scrollbars) should
     follow — the mirror of the `only light` declaration above. */
  color-scheme: only dark;

  /* --- Surfaces, lightest to deepest ------------------------------------- */
  --surface-page:      #0a0810;   /* the near-black violet ground */
  --surface-raised:    #14101f;
  --surface-sunken:    #1c1926;
  --surface-overlay:   #14101f;
  --surface-veil:      rgba(0, 0, 0, 0.55);

  /* --- Ink ---------------------------------------------------------------- */
  --ink:               #f4f1fa;
  --ink-soft:          #c9c4d6;
  --ink-muted:         #8d8898;
  --ink-disabled:      #6f6a7c;
  --ink-inverse:       #0a0810;

  /* --- Brand ---------------------------------------------------------------
     The violet accent, with the cyan-tipped gradient the landing runs. */
  --brand-fill:        #8240ff;
  --brand-fill-hover:  #6e20f4;
  --brand-fill-soft:   rgba(130, 64, 255, 0.18);
  --brand-ink:         #ffffff;
  --brand-ink-soft:    #f6efff;   /* still clears 4.5:1 on --brand-fill */
  --brand-gradient:       linear-gradient(105deg, #d2b8ff 0%, #8240ff 54%, #1fc7ff 120%);
  --brand-gradient-hover: linear-gradient(105deg, #f0e6ff 0%, #9e5cff 48%, #4ed7ff 118%);

  /* --- Lines -------------------------------------------------------------- */
  --line:              rgba(255, 255, 255, 0.10);
  --line-soft:         rgba(255, 255, 255, 0.06);
  --line-strong:       rgba(255, 255, 255, 0.30);
  --focus-ring:        rgba(130, 64, 255, 0.55);

  /* --- Glass (frosted surfaces) ------------------------------------------- */
  --glass:             rgba(255, 255, 255, 0.05);
  --glass-strong:      rgba(255, 255, 255, 0.09);
  --glass-line:        rgba(255, 255, 255, 0.10);

  /* --- Shadows — same shape, heavier alpha for a dark page ---------------- */
  --shadow-sm:         0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md:         0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg:         0 20px 50px rgba(0, 0, 0, 0.55);

  /* --- Overlays, scrims and neutral fills ---------------------------------
     Scrims stay dark (they dim photos), the wash flips to the white family. */
  --wash:              rgba(255, 255, 255, 0.04);

  /* --- Veils ---------------------------------------------------------------
     The light theme's frosted-white panel fills, flipped to the dark family.
     These MUST be re-valued here: left unset, `--veil-strong` stayed the
     section-1 value — rgba(255,255,255,0.85), an 85% WHITE sheet — and
     `#chat-list` (chat-list-tabs.css) paints the whole chat page with it, so
     /chat rendered light while every other opted-in page went dark. The
     "…-glass" and "…-wash" rungs were authored as white-on-dark-band chips and
     already read correctly on this page; they are restated so this block stays
     the complete token contract. */
  --veil:              rgba(10, 8, 16, 0.35);
  --veil-strong:       rgba(16, 12, 26, 0.85);
  --veil-glass:        rgba(255, 255, 255, 0.10);
  --veil-wash:         rgba(255, 255, 255, 0.05);

  /* On a dark page the "soft" rung sits nearer the background and "strong"
     nearer the ink — the light theme's ordering, mirrored. */
  --fill-mid:          #6b6580;
  --fill-mid-soft:     #4a4560;
  --fill-mid-strong:   #938ca8;

  /* On-media ink stays light (the scrim below it is dark here too), and the
     accent becomes the aurora violet — lifted off --brand-fill so a 12px icon
     still reads against a near-black scrim. */
  --on-media-ink:       #ffffff;
  --on-media-ink-soft:  rgba(240, 234, 255, 0.76);
  --on-media-accent:    #b18aff;

  /* --- Semantic status — re-lit so they read on the dark ground ----------- */
  --status-success:    #3ecf7a;
  --status-danger:     #ff6262;
  --status-warning:    #ffc94d;
  --status-info:       #c9c4d6;
  --status-ink:        #0a0810;   /* label on any filled status colour */
}

/* ============================================================================
   3b. PER-BRAND SKIN — Seisei (seisei.me), the anime brand
   ----------------------------------------------------------------------------
   Same token contract as the ChatLamix block above, re-valued to the brand's
   ink-and-sakura identity: a near-black plum ground with the sakura-pink accent
   the mark is built from (public/img/brand/seisei/logo-mark.svg,
   config/brand.js → themeColor). Everything that made the block above necessary
   applies unchanged — it must be scoped to <html>, and every rung has to be
   restated, because a token left unset keeps the LIGHT theme's value and lands
   a white sheet in the middle of a dark page.

   See docs/SEISEI_ANIME_BRAND.md.
   ============================================================================ */

html[data-brand="seisei"] {
  color-scheme: only dark;

  /* --- Surfaces, lightest to deepest ------------------------------------- */
  --surface-page:      #0c0710;   /* near-black plum */
  --surface-raised:    #171020;
  --surface-sunken:    #1f1729;
  --surface-overlay:   #171020;
  --surface-veil:      rgba(0, 0, 0, 0.55);

  /* --- Ink ---------------------------------------------------------------- */
  --ink:               #fbf2f6;
  --ink-soft:          #d8c7d2;
  --ink-muted:         #9a8b95;
  --ink-disabled:      #786b74;
  --ink-inverse:       #0c0710;

  /* --- Brand ---------------------------------------------------------------
     The sakura accent, with the cyan-tipped gradient the mark's spark uses. */
  --brand-fill:        #ff4d8d;
  --brand-fill-hover:  #e02a6e;
  --brand-fill-soft:   rgba(255, 77, 141, 0.18);
  --brand-ink:         #ffffff;
  --brand-ink-soft:    #fff0f6;   /* still clears 4.5:1 on --brand-fill */
  --brand-gradient:       linear-gradient(105deg, #ffd0e2 0%, #ff4d8d 54%, #1fc7ff 120%);
  --brand-gradient-hover: linear-gradient(105deg, #ffe6f0 0%, #ff6ea2 48%, #4ed7ff 118%);

  /* --- Lines -------------------------------------------------------------- */
  --line:              rgba(255, 255, 255, 0.10);
  --line-soft:         rgba(255, 255, 255, 0.06);
  --line-strong:       rgba(255, 255, 255, 0.30);
  --focus-ring:        rgba(255, 77, 141, 0.55);

  /* --- Glass (frosted surfaces) ------------------------------------------- */
  --glass:             rgba(255, 255, 255, 0.05);
  --glass-strong:      rgba(255, 255, 255, 0.09);
  --glass-line:        rgba(255, 255, 255, 0.10);

  /* --- Shadows — same shape, heavier alpha for a dark page ---------------- */
  --shadow-sm:         0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md:         0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg:         0 20px 50px rgba(0, 0, 0, 0.55);

  /* --- Overlays, scrims and neutral fills --------------------------------- */
  --wash:              rgba(255, 255, 255, 0.04);

  /* --- Veils — the dark family; see the note in the block above ----------- */
  --veil:              rgba(12, 7, 16, 0.35);
  --veil-strong:       rgba(20, 12, 26, 0.85);
  --veil-glass:        rgba(255, 255, 255, 0.10);
  --veil-wash:         rgba(255, 255, 255, 0.05);

  --fill-mid:          #7d6b76;
  --fill-mid-soft:     #574a54;
  --fill-mid-strong:   #a4919d;

  --on-media-ink:       #ffffff;
  --on-media-ink-soft:  rgba(255, 238, 246, 0.76);
  --on-media-accent:    #ff8ab4;

  /* --- Semantic status — re-lit so they read on the dark ground ----------- */
  --status-success:    #3ecf7a;
  --status-danger:     #ff6262;
  --status-warning:    #ffc94d;
  --status-info:       #d8c7d2;
  --status-ink:        #0c0710;   /* label on any filled status colour */
}

/* ============================================================================
   3. NATIVE CONTROL ACCENT  — the one rule in this file, and it is token-only
   ----------------------------------------------------------------------------
   Checkboxes and radios that are NOT restyled fall back to the browser's own
   accent (a blue box on most platforms, purple/grey in a few stylesheets that
   set their own). This file is the only stylesheet every page loads, so the
   platform-wide default belongs here: one black-ink box everywhere, following
   whatever skin is active.

   Element selectors, so any component that draws its own box — the .form-check
   controls in overwrite-bootstrap.css, the hand-rolled ones in the dashboards —
   still wins on specificity.
   ========================================================================== */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--brand-fill);
}