/* ============================================================
   ЭТО / ETO STUDIO — COLOR TOKENS
   Warm-paper light / warm-black dark, single signal accent.
   The brand runs on two near-monochrome surfaces and ONE red.
   ============================================================ */

:root {
  /* ---- Base palette (light is the default surface) ---- */
  --eto-paper:        #f4f3ef;   /* warm off-white — primary surface */
  --eto-paper-2:      #ece9e2;   /* slightly deeper paper — bands / wells */
  --eto-ink:          #161310;   /* warm near-black — text & lines */
  --eto-ink-soft:     #100e0c;   /* the dark-theme surface black */

  /* ---- The signal ---- */
  --eto-red:          #ff3b21;   /* THE accent. used sparingly: dots, hovers, _ */
  --eto-red-dark:     #ff4a30;   /* accent on dark surfaces (slightly hotter) */

  /* ---- Plasma spectrum (WebGL background field only) ----
     Never use these as UI fills — they belong to the living
     gradient that bleeds behind the page. */
  --eto-plasma-red:     #f61c0e;
  --eto-plasma-orange:  #ff8700;
  --eto-plasma-magenta: #ff0a6b;
  --eto-plasma-violet:  #6617ff;

  /* ---- Semantic aliases — LIGHT (default) ---- */
  --bg:        #f4f3ef;
  --bg-2:      #ece9e2;
  --fg:        #161310;
  --muted:     rgba(22, 19, 16, 0.52);
  --line:      rgba(22, 19, 16, 0.14);
  --line-2:    rgba(22, 19, 16, 0.28);
  --accent:    #ff3b21;
  --nav-bg:    rgba(244, 243, 239, 0.72);

  /* inverse surface (e.g. dark card on a light page) */
  --inv-bg:    #161310;
  --inv-fg:    #f4f3ef;
  --inv-line:  rgba(244, 243, 239, 0.16);
  --inv-muted: rgba(244, 243, 239, 0.55);

  /* on-image text (always light over the dark photo gradient) */
  --on-media:        #ffffff;
  --on-media-muted:  rgba(255, 255, 255, 0.92);
  --on-media-line:   rgba(255, 255, 255, 0.42);

  /* dark gradient scrim laid over imagery so text stays legible */
  --media-scrim: linear-gradient(180deg,
      rgba(12,10,9,.50) 0%,
      rgba(12,10,9,.05) 28%,
      rgba(12,10,9,.12) 50%,
      rgba(12,10,9,.85) 100%); /* @kind other */
}

/* ============================================================
   DARK THEME — set data-theme="dark" on the root container.
   Warm black, hotter red, lines flip to light-on-dark.
   ============================================================ */
[data-theme="dark"] {
  --bg:        #100e0c;
  --bg-2:      #1a1714;
  --fg:        #f3f1ec;
  --muted:     rgba(243, 241, 236, 0.54);
  --line:      rgba(243, 241, 236, 0.15);
  --line-2:    rgba(243, 241, 236, 0.30);
  --accent:    #ff4a30;
  --nav-bg:    rgba(16, 14, 12, 0.72);

  --inv-bg:    #f3f1ec;
  --inv-fg:    #161310;
  --inv-line:  rgba(22, 19, 16, 0.16);
  --inv-muted: rgba(22, 19, 16, 0.55);
}