/* ============================================================
   THEME — every colour the site can be
   ============================================================
   Loaded before any other stylesheet. Both the deck and the thread
   list read from these, so a palette is defined once and nothing
   else in the project holds a colour literal.
   ============================================================ */

/* ---------- theme tokens ----------
   Every colour in both stylesheets resolves to one of these. Nothing below
   this block is a literal, which is what makes a new theme data rather than
   code: redefine the tokens, change nothing else.

   Two axes, and they're independent:

     data-pill   blue / red — the reading. This is the product, not decor:
                 blue is the story as told, red is the other one.
     data-theme  the palette a thread's author picked. A theme has to supply
                 BOTH pill states, so the mechanic survives the styling.

   A theme block and the base pill block have equal specificity, so order
   decides: base first, then themes, then each theme's red state. */

:root {
  /* ground */
  --bg:        #05070c;
  --bg-lift:   #0a0f18;   /* the lit centre of the backdrop */

  /* type */
  --ink:       #e8edf5;
  --ink-dim:   #93a0b4;
  --ink-faint: #5a6579;
  --on-accent: #fff;      /* text sitting on an accent fill */

  /* raised surfaces */
  --surface:   rgba(255,255,255,.038);
  --surface-2: rgba(255,255,255,.055);
  --line:      rgba(255,255,255,.085);
  --line-soft: rgba(255,255,255,.05);

  /* the frosted panels: cards, index, drawer, chips */
  --panel:       rgba(8,11,17,.72);
  --panel-soft:  rgba(8,11,17,.34);
  --panel-solid: rgba(8,11,17,.94);

  /* recessed wells: composers, fallback panels, inputs */
  --well:   rgba(0,0,0,.22);
  --well-2: rgba(0,0,0,.35);

  --hover:   rgba(255,255,255,.032);
  --hover-2: rgba(255,255,255,.05);

  --dot:       #454f66;   /* a rail or index dot, unvisited */
  --letterbox: #000;      /* behind archived video */
  --scrim:     rgba(3,5,9,.6);

  --sheen:       rgba(255,255,255,.58);
  --sheen-under: rgba(0,0,0,.35);
  --shadow:      rgba(0,0,0,.9);
  --shadow-deep: rgba(0,0,0,.95);

  /* state */
  --ok:         #3fd18b;
  --err:        #ff6b6b;
  --alarm:      #ff3d4e;
  --alarm-glow: rgba(255,61,78,.5);

  /* accent — swapped by the pill */
  --accent:      #4f8dff;
  --accent-deep: #1f4fbf;
  --accent-ink:  #cfe0ff;
  --glow:        rgba(79,141,255,.30);
  --glow-soft:   rgba(79,141,255,.10);

  /* the two pill buttons are always both on screen, so they carry their own
     colours rather than following the active accent */
  --pill-blue-1: #7ba9ff;
  --pill-blue-2: #2f6ae0;
  --pill-blue-3: #143a86;
  --pill-blue-glow: rgba(79,141,255,.75);
  --pill-red-1: #ff8a92;
  --pill-red-2: #e02231;
  --pill-red-3: #7e0d17;
  --pill-red-glow: rgba(255,61,78,.75);

  /* geometry — not a palette, but the same idea */
  --card-w: 640px;
  --card-h: min(76vh, 940px);
  --gap: 34px;
  --radius: 22px;

  --ease: cubic-bezier(.22,.61,.28,1);
  --slide: 620ms;
}

html[data-pill="red"] {
  --bg:          #0a0406;
  --bg-lift:     #180a0d;
  --accent:      #ff3d4e;
  --accent-deep: #a3121f;
  --accent-ink:  #ffd2d6;
  --glow:        rgba(255,61,78,.30);
  --glow-soft:   rgba(255,61,78,.10);
}

/* ---------- themes ----------
   Each one supplies a full palette for both pill states. `terminal` is the
   base above and needs no block of its own. */

/* punk — black, acid, loud. Nothing is soft here. */
html[data-theme="punk"] {
  --bg:        #050505;
  --bg-lift:   #121212;
  --ink:       #f4f4f4;
  --ink-dim:   #a6a6a6;
  --ink-faint: #666;
  --on-accent: #0a0a0a;

  --surface:   rgba(255,255,255,.05);
  --surface-2: rgba(255,255,255,.08);
  --line:      rgba(255,255,255,.14);
  --line-soft: rgba(255,255,255,.07);

  --panel:       rgba(8,8,8,.8);
  --panel-soft:  rgba(8,8,8,.4);
  --panel-solid: rgba(8,8,8,.96);
  --well:   rgba(0,0,0,.4);
  --well-2: rgba(0,0,0,.55);
  --hover:   rgba(182,255,46,.06);
  --hover-2: rgba(182,255,46,.1);
  --dot:     #3d3d3d;
  --scrim:   rgba(0,0,0,.72);

  --accent:      #b6ff2e;
  --accent-deep: #6d9c00;
  --accent-ink:  #e9ffc0;
  --glow:        rgba(182,255,46,.32);
  --glow-soft:   rgba(182,255,46,.1);

  --pill-blue-1: #d4ff7a;
  --pill-blue-2: #9ee516;
  --pill-blue-3: #4d7300;
  --pill-blue-glow: rgba(182,255,46,.8);
  --pill-red-1: #ff8ae4;
  --pill-red-2: #ff2ec4;
  --pill-red-3: #8c0069;
  --pill-red-glow: rgba(255,46,196,.8);

  --alarm:      #ff2ec4;
  --alarm-glow: rgba(255,46,196,.5);
  --ok:  #b6ff2e;
  --err: #ff2ec4;
}
html[data-theme="punk"][data-pill="red"] {
  --bg:          #0b0009;
  --bg-lift:     #1a0014;
  --accent:      #ff2ec4;
  --accent-deep: #a30078;
  --accent-ink:  #ffd6f3;
  --glow:        rgba(255,46,196,.32);
  --glow-soft:   rgba(255,46,196,.1);
  --on-accent:   #14000f;
  --hover:   rgba(255,46,196,.07);
  --hover-2: rgba(255,46,196,.11);
}

/* bloom — deep plum, rose and gold. Soft where punk is sharp. */
html[data-theme="bloom"] {
  --bg:        #140b16;
  --bg-lift:   #221030;
  --ink:       #f8eef5;
  --ink-dim:   #c8aec1;
  --ink-faint: #8d7387;
  --on-accent: #2a0f1f;

  --surface:   rgba(255,225,240,.05);
  --surface-2: rgba(255,225,240,.075);
  --line:      rgba(255,214,235,.12);
  --line-soft: rgba(255,214,235,.06);

  --panel:       rgba(24,12,26,.74);
  --panel-soft:  rgba(24,12,26,.36);
  --panel-solid: rgba(24,12,26,.95);
  --well:   rgba(0,0,0,.2);
  --well-2: rgba(0,0,0,.3);
  --hover:   rgba(255,143,184,.06);
  --hover-2: rgba(255,143,184,.1);
  --dot:     #58405a;
  --scrim:   rgba(16,6,18,.62);

  --accent:      #ff8fb8;
  --accent-deep: #c04a7c;
  --accent-ink:  #ffe3ee;
  --glow:        rgba(255,143,184,.3);
  --glow-soft:   rgba(255,143,184,.1);

  --pill-blue-1: #ffc2d8;
  --pill-blue-2: #ff8fb8;
  --pill-blue-3: #a03462;
  --pill-blue-glow: rgba(255,143,184,.75);
  --pill-red-1: #ffe0a3;
  --pill-red-2: #e8b34a;
  --pill-red-3: #8a6111;
  --pill-red-glow: rgba(232,179,74,.75);

  --alarm:      #ff7a9c;
  --alarm-glow: rgba(255,122,156,.5);
  --ok:  #7fd6a8;
  --err: #ff7a9c;
}
html[data-theme="bloom"][data-pill="red"] {
  --bg:          #1a1206;
  --bg-lift:     #2b1f08;
  --accent:      #e8b34a;
  --accent-deep: #96700f;
  --accent-ink:  #fff0cd;
  --glow:        rgba(232,179,74,.3);
  --glow-soft:   rgba(232,179,74,.1);
  --on-accent:   #241a04;
  --hover:   rgba(232,179,74,.07);
  --hover-2: rgba(232,179,74,.11);
}

/* press — light. Warm paper, ink, a single red. The proof the tokens work:
   every surface inverts and nothing below this block had to change. */
html[data-theme="press"] {
  --bg:        #f4f1ea;
  --bg-lift:   #fffefb;
  --ink:       #16140f;
  --ink-dim:   #4c463b;
  --ink-faint: #8b8375;
  --on-accent: #fff;

  --surface:   rgba(0,0,0,.028);
  --surface-2: rgba(0,0,0,.05);
  --line:      rgba(0,0,0,.14);
  --line-soft: rgba(0,0,0,.075);

  --panel:       rgba(255,254,251,.84);
  --panel-soft:  rgba(255,254,251,.5);
  --panel-solid: rgba(255,254,251,.97);
  --well:   rgba(0,0,0,.045);
  --well-2: rgba(0,0,0,.075);
  --hover:   rgba(0,0,0,.038);
  --hover-2: rgba(0,0,0,.06);
  --dot:     #c6bfb1;
  --letterbox: #2a2620;
  --scrim:   rgba(40,34,26,.36);

  --sheen:       rgba(255,255,255,.75);
  --sheen-under: rgba(0,0,0,.14);
  --shadow:      rgba(62,52,36,.2);
  --shadow-deep: rgba(62,52,36,.28);

  --accent:      #1c4fd8;
  --accent-deep: #10307f;
  --accent-ink:  #10307f;
  --glow:        rgba(28,79,216,.22);
  --glow-soft:   rgba(28,79,216,.07);

  --pill-blue-1: #7fa4f2;
  --pill-blue-2: #1c4fd8;
  --pill-blue-3: #0d2a72;
  --pill-blue-glow: rgba(28,79,216,.6);
  --pill-red-1: #f08a90;
  --pill-red-2: #c81e2a;
  --pill-red-3: #750d15;
  --pill-red-glow: rgba(200,30,42,.6);

  --alarm:      #c81e2a;
  --alarm-glow: rgba(200,30,42,.35);
  --ok:  #1c7a4f;
  --err: #b8323c;
}
html[data-theme="press"][data-pill="red"] {
  --bg:          #f7edea;
  --bg-lift:     #fffcfa;
  --accent:      #c81e2a;
  --accent-deep: #7c1119;
  --accent-ink:  #7c1119;
  --glow:        rgba(200,30,42,.22);
  --glow-soft:   rgba(200,30,42,.07);
}