/*
  ⭐ THE PALETTE — EVERY COLOUR MY DAMN SELF USES, IN ONE FILE (2026-09-29).

  Kayla has not picked a new palette yet. When she does, this is the file that
  changes: the app (app/src/index.css imports it), the front page (.lp) and the
  plain pages (pricing, privacy, terms, support, thanks, field guide, testers)
  all read their colours from here. The values below are the CURRENT live
  colours, moved here unchanged.

  scripts/palette.test.mjs re-checks every words-on-ground pair for WCAG AA.
*/

/*
  ⭐ THE DARK GROUND IS ALMOST BLACK, WITH BLUE IN IT.

  the author, 2026-08-22: "the darker one, the background needs to be like almost
  black. Maybe like a deep, deep blue."

  It used to be a dark plum — #150a11 and up — and she is right that it was
  wrong, for a reason worth writing down: the ground was in the SAME FAMILY as
  the loudest accent. Hot pink on a plum field is pink on pink, and the neon
  came out muddy no matter how bright it was. Moving the ground to a blue-black
  puts it opposite the pink on the wheel, so the same colours hit harder without
  a single accent being changed.

  ⚠️ Kept dark enough to still read as black in a dim room, which is where this
  gets used. Not navy — navy is a colour. This is black that happens to be cold.

  ⭐ SUPERSEDED 2026-09-25: the ground is now the purple-black #141117 from the
  purple-and-red sheet. With the pink gone, the reason for a cold ground went too.
*/
:root {
  /*
    ⭐ PURPLE AND RED — Kayla, 2026-09-25 (option 1, "Design spec — My Damn Self
    option 1, purple and red — 2026-09-24"). Every value in this block and the
    light block below is off that sheet; its contrast table is re-checked in
    scripts/palette.test.mjs. The pink is retired, partly so the look does not put
    off the men who need this too.
  */
  --bg: #141117;
  --bg-2: #1a161e;
  --surface: #1f1a24;
  --surface-2: #262029;
  --ink: #f4f1f6;
  --ink-2: #bdb4c4;
  --ink-3: #968d9e;
  --line: #3a3142;

  /*
    THE BRAND, AS FIVE TOKENS. Nothing else in this stylesheet names a brand hex.
      --brand           a fill with white words on it (primary button, active nav)
      --brand-text      words, links, borders and tints drawn in the brand colour
      --brand-red       the signal red — the heart, DAMN, the emphasis, the focus ring
      --brand-red-fill  red as a fill with white words on it
      --error           errors ONLY. Orange-red, kept visibly apart from --brand-red,
                        so a mistake never looks like the logo and the logo never
                        looks like a mistake.
    On dark the fill and the text part ways: #7B2D93 carries white words (7.96:1)
    but is too dark to read on the page, so words use the light purple.
  */
  --brand: #7b2d93;
  --brand-text: #d9b8e8;
  --brand-red: #ff5a6e;
  --brand-red-fill: #c8102e;
  --on-brand: #ffffff;
  --focus: #ff5a6e;
  --error: #ff8a50;
  --error-bg: #2a150d;
  /* a warning in words ("check this date") — the sheet's warning amber */
  --caution: #f5c35b;
  --violet: var(--brand-text);

  /* the spot set — categories and charts, not the brand */
  --cyan: #22d3ee;
  --purple: #d9b8e8;
  --amber: #f59e0b;
  --gold: #ffc857;
  --green: #22c55e;
  --danger: var(--error);

  --accent: var(--brand-text);
  --accent-ink: #fff;

  --warn-bg: #1f1a24;
  --warn-line: #7b2d93;
  --warn-ink: #f4f1f6;

  --radius: 14px;
  --glow: 0 0 0 1px rgb(255 255 255 / 6%), 0 8px 30px rgb(0 0 0 / 55%);

  /* Everything below used to be a hex typed into a rule. It is a token now so
     that the light theme is one block instead of a second stylesheet. */
  /* A purple wash from the top, off the shield. */
  --page: radial-gradient(1100px 600px at 50% -10%, #2a1433 0%, transparent 60%),
    radial-gradient(700px 500px at 100% 100%, #1d1022 0%, transparent 60%), var(--bg);
  --card-a: var(--surface);
  --card-b: var(--bg-2);
  --tile-a: var(--surface);
  --tile-b: #17131b;
  --tile-glow: 0 0 22px -6px var(--tile, var(--cyan)),
    inset 0 0 30px -22px var(--tile, var(--cyan));
  --badge-a: #1f1a24;
  --badge-b: #1a161e;
  --badge-line: #3a3142;
  --proven-ink: #ffffff;
  --on-gold: #1a1016;
  --on-pink: #fff;
  --side-bg: color-mix(in srgb, var(--bg-2) 88%, transparent);
  --nav-on-a: var(--brand-text);
  --nav-on-b: var(--brand-text);
  --nav-on-ink: var(--brand-text);
  --nav-on-fill: color-mix(in srgb, var(--brand-text) 14%, transparent);
  --folder: #c8102e;
  --folder-2: #5c0970;
  --folder-ink: #fff8ff;
}

/*
  THE LIGHT HALF OF THE DESIGN — 2026-08-17.

  the author drew all twelve screens twice: neon on black, and hot pink on white.
  Both are the app. Only the tokens change; not one screen has a second layout.

  Set explicitly on <html> by lib/theme.ts rather than by a media query alone,
  so she can override the system without anything being written to the device.
*/
/*
  OPTION A, from the author's design sheet of 2026-08-20: hot pink, coral, gold,
  deep plum. Her mockups are drawn in the light theme, so this is the
  one they have to match.

  Neutrals stay cool pink-white. Cream and peach read as dirty brown next to
  this pink, and that is out.
*/
[data-theme='light'] {
  /* ⭐ 2026-08-28 — matched to the canonical prototype `my-damn-self-app.html`
     ("this is it"). Warm-white canvas, dark-plum sidebar, pink accent, plum +
     violet + a cheery spot set. Ink is near-black, not plum. */
  --bg: #f7f4f9;       /* canvas — the sheet's card tint */
  --bg-2: #f7f4f9;     /* panel  */
  --surface: #ffffff;  /* paper  */
  --surface-2: #f7f4f9;
  --ink: #1a1a1f;
  --ink-2: #5b5563;
  /* Tertiary words still have to be read: 5.28:1 on the canvas, 5.9:1 on white. */
  --ink-3: #6a6373;
  --line: #e3dce8;

  /* the brand — see the note on the dark block. Here fill and text are one purple. */
  --brand: #5c0970;
  --brand-text: #5c0970;
  --brand-red: #c8102e;
  --brand-red-fill: #c8102e;
  --on-brand: #ffffff;
  --focus: #c8102e;
  --error: #c2410c;
  --error-bg: #fff1ea;
  --caution: #8a5a00;

  --plum: #5c0970;
  --plum2: #5c0970;
  --burgundy: #c8102e;
  --violet: var(--brand-text);
  --blue: #7c7bef;   /* periwinkle */
  --purple: #5c0970;
  --cyan: #22988f;   /* teal */
  /* Deep marigold. Small warning words are set in it ("needs a look"), so it
     has to read at AA: 4.5:1 or better on the canvas, on white, and on its own
     10-18% tint. The old #f2a93b was 2:1 on white. */
  --amber: #7a4e00;
  --gold: #f2a93b;
  --green: #4fa35b;
  --coral: #f0664b;
  --danger: var(--error);

  --accent: var(--brand-text);
  --accent-ink: #fff;

  --warn-bg: #f7f4f9;
  --warn-line: #e3dce8;
  --warn-ink: #5c0970;

  --glow: 0 14px 40px rgba(65, 22, 68, 0.1);
  --page: radial-gradient(900px 520px at 50% -12%, #efe6f3 0%, transparent 62%), var(--bg);
  --card-a: #ffffff;
  --card-b: #ffffff;
  --tile-a: #ffffff;
  --tile-b: #ffffff;
  --tile-glow: 0 14px 40px -18px rgba(65, 22, 68, 0.18);
  --badge-a: #f7f4f9;
  --badge-b: #f7f4f9;
  --badge-line: #e3dce8;
  --proven-ink: #fff;
  /* Dark on gold — white on marigold vanishes, especially on the import page. */
  --on-gold: #211c1f;
  --on-pink: #fff;
  --side-bg: #ffffff;
  --nav-on-ink: #fff;
  --nav-on-fill: linear-gradient(95deg, var(--brand), var(--brand-red-fill));
  --folder: #c8102e;
  --folder-2: #5c0970;
  --folder-ink: #fff8ff;
}

.lp {
  --lp-violet: var(--brand-text);
  /* ⛔ The landing page is a white page in both themes, so it pins the LIGHT
     brand values; the dark ones are for dark grounds and would vanish here. */
  --brand: #5c0970; --brand-text: #5c0970; --brand-red: #c8102e; --brand-red-fill: #c8102e;
  --focus: #c8102e; --error: #c2410c; --error-bg: #fff1ea; --caution: #8a5a00;
  --amber: #7a4e00;
  --ink: #17121c; --ink-2: #544d5a; --ink-3: #6b6475;
  --line: #eadcea; --surface: #ffffff;
  --band-blush: #f7f4f9;
  --band-lilac: #f1ebf5;
  --band-plum: #3f064d;
  --lp-teal-ink: #136f68;
  --lp-pink-ink: #c8102e;
  --wordmark-font: var(--ui);
  --wordmark-size: 24px;
  max-width: 1160px; margin: 0 auto; padding: 0 28px 28px;
  color: var(--ink);
}
:root[data-look='neon'] .lp {
  --ink: #f4f4fa; --ink-2: #b4b4cc; --ink-3: #9a9ab4;
  --line: #26264a; --surface: #0e0e1c;
  --band-blush: #1a161e; --band-lilac: #141117; --band-plum: #2a0c33;
  --brand: #7b2d93; --brand-text: #d9b8e8; --brand-red: #ff5a6e; --brand-red-fill: #c8102e;
  --focus: #ff5a6e; --error: #ff8a50; --error-bg: #2a150d; --caution: #f5c35b;
  --amber: #ff9f0a;
  --lp-teal-ink: #5fd4c8; --lp-pink-ink: #ff5a6e;
}

.lp {
  /* spacing tokens — the one rhythm */
  --lp-space: 104px;
  --lp-space-sm: 64px;
  --lp-radius: 16px;
  /* colours this page used to type as hexes, now named here (same values) */
  --lp-ok-ink: #2e7d3a;        /* the free packet's words */
  --lp-plum-soft: #d9b8e8;     /* labels on the plum band */
  --lp-plum-red: #ff5a6e;      /* the red accent on the plum band */
  --lp-plum-teal: #9ce8df;     /* numbers and links on the plum band */
  --lp-plum-gold: #ffcf7a;     /* the second number on the plum band */
  --lp-film-ground: #150a1a;   /* behind the film before it loads */
  --lp-veil: rgba(20, 15, 30, .55);
}

/*
  ⭐ GREY, NOT PURPLE, BEHIND THE SIGNED-IN SCREENS. Kayla, 2026-09-26: "I don't want
  the background to be this purple color, let's change it to like a grey." Two
  purples sat behind the dashboard on a phone: the dark plum strip that holds the
  logo and Add · Timeline · Packet · More, and the faint lilac page itself. Both
  are neutral grey now. ⛔ The logo is untouched, and so is the brand purple on
  buttons. The desktop sidebar keeps its plum (she spoke about the phone), and the
  front page keeps its own purple. Words on these greys are re-checked for AA in
  scripts/palette.test.mjs ("app shell greys").
*/
[data-theme='light'] .app {
  --bg: #f4f4f5;
  --bg-2: #f4f4f5;
  --surface-2: #f4f4f5;
}
[data-theme='dark'] .app {
  --bg: #141416;
  --bg-2: #1a1a1d;
  --surface: #1f1f23;
  --surface-2: #26262a;
}

/*
  THE BRAND PURPLE GRADIENT, WRITTEN ONCE (scripts/brand.test.mjs). The computer
  sidebar's base rule, the phone strip and the old .landing page all draw it from
  these three stops. The signed-in rail is charcoal (Kayla, 2026-09-26) — its three
  stops are here too.
*/
:root {
  --plum-stop-1: #220A29;
  --plum-stop-2: #351039;
  --plum-stop-3: #4A164F;
  --band-plum-deep: #3F064D;
  --plum-deep: #5C0970;
  --shell-stop-1: #1f1f23;
  --shell-stop-2: #2a2a2f;
  --shell-stop-3: #34343a;
}

/*
  THE PLAIN PAGES (pricing, privacy, terms, support, thanks, field guide,
  testers, maintenance). They are not part of the app bundle, so they link this
  file directly and mark themselves <html data-page>. Same values they carried
  inline before 2026-09-29.
*/
:root[data-page] {
  --bg: #f7f7f5; --panel: #ffffff; --ink: #1a1a17; --muted: #6b6b63;
  --line: #e2e2dc; --chip: #f0efea;
  --accent: #7a5c2e; --hot: #a33a2a; --warm: #b8752a; --cool: #3b6b5a;
  --brand: #5c0970; --brand-red: #c8102e;
  --pink: #ff1e7a; /* testers page only, as it was */
}
@media (prefers-color-scheme: dark) {
  :root[data-page]:not([data-theme='light']) {
    --bg: #16161a; --panel: #1e1e23; --ink: #eceae4; --muted: #9c9c94;
    --line: #32323a; --chip: #26262c;
    --accent: #d0aa68; --hot: #e0705c; --warm: #e0a153; --cool: #6fb39a;
    --brand: #7b2d93; --brand-red: #ff5a6e;
    --pink: #ff4f94;
  }
}

/* The field guide keeps its own set (same values it carried inline). */
:root[data-page='guide'] {
    --paper: #fdfbfe;
    --card: #ffffff;
    --sunk: #f7f2fb;
    --ink: #1d1626;
    --ink-2: #574f63;
    --ink-3: #6b6475;
    --line: #ece4f2;
    --line-2: #e0d6ea;
    --pink: #c8102e;
    --pink-bright: #c8102e;
    --violet: #5c0970;
    --blue: #2563eb;
    --green: #0a9c5b;
    --shadow: 0 1px 2px rgba(29,22,38,.04), 0 12px 32px rgba(92,9,112,.06);
  }
@media (prefers-color-scheme: dark) {
  :root[data-page='guide']:not([data-theme="light"]) {
      --paper: #140f1c;
      --card: #1b1526;
      --sunk: #201829;
      --ink: #f4eefb;
      --ink-2: #c3b9d1;
      --ink-3: #8b8298;
      --line: #2b2237;
      --line-2: #362b45;
      --pink: #ff5a6e;
      --pink-bright: #ff5a6e;
      --violet: #d9b8e8;
      --blue: #7aa2ff;
      --green: #38d08a;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 14px 40px rgba(0,0,0,.35);
    }
}
:root[data-page='guide'][data-theme="dark"] {
    --paper: #140f1c;
    --card: #1b1526;
    --sunk: #201829;
    --ink: #f4eefb;
    --ink-2: #c3b9d1;
    --ink-3: #8b8298;
    --line: #2b2237;
    --line-2: #362b45;
    --pink: #ff5a6e;
    --pink-bright: #ff5a6e;
    --violet: #d9b8e8;
    --blue: #7aa2ff;
    --green: #38d08a;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 14px 40px rgba(0,0,0,.35);
  }