/*
 * Design tokens of Wauchi, taken from H1 (css/h1.css of the demo) as CLAUDE.md asks: its colours,
 * its radii, its shadow. Never purple. Custom properties cross shadow roots, so every component
 * reads them from here.
 */
:root {
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-round: 999px;

  --primary: #0d7ee5;
  --primary-dark: #0a63b8;
  --accent: #f5c518;
  --bg: #f0f7ff;
  --card: #ffffff;
  --card-2: #f6f9fe;
  --text: #0f172a;
  --text-light: #475569;
  --border: #dbeafe;
  --header-start: #000c26;
  --header-end: #0d7ee5;
  --entr: #0d7ee5;
  /* the blue of the hero card, H1's: a gradient from --hero-1 to --hero-2 */
  --hero-1: #0d7ee5;
  --hero-2: #1d4ed8;
  /* a card raised over a card (H1's .cs-inq): a touch of blue here, a touch of white on the dark theme */
  --card-raised: color-mix(in srgb, var(--primary) 7%, var(--card));
  --usc: #8a6700;
  --usc-bar: #f5c518;
  --on-primary: #ffffff;
  --ok: #0f9d6f;
  --s2: #eb6834; /* the orange of H1's palette: the second colour of a note */
  /* The post-it (the note, its colour dots, the gallery's chooser): H1's tints on the card; in the
     dark theme on near-black, and the yellow note becomes a sheet of paper (demo, nuovo.css). */
  --note-base: var(--card);
  --note-tint: 22%;
  --note-edge: var(--border);
  --note-edge-tint: 50%;
  --note-dot-edge-tint: 55%;
  --note-corner-tint: 50%;
  --note-yellow: var(--usc-bar);
  --note-yellow-bg: color-mix(in srgb, var(--usc-bar) 22%, var(--card));
  --note-yellow-edge: color-mix(in srgb, var(--usc-bar) 50%, var(--border));
  --note-yellow-corner: color-mix(in srgb, var(--usc-bar) 50%, var(--card));
  --note-yellow-text: var(--text);
  --note-yellow-text-light: var(--text-light);
  --note-yellow-card: var(--card);
  --note-yellow-border: var(--border);
  /* the green of a good moment (the demo's «trovato» card): the dialog after «Sì, ho finito» */
  --cheer: #0f7f58;
  --cheer-bg: color-mix(in srgb, #0f7f58 10%, var(--card));
  --cheer-text: #0b6b4a;
  --ko: #dc2626;
  --warn: #f5c518;
  --ombra: 0 1px 4px rgba(0, 0, 0, 0.05);
  /* the background of every page: «1c Mamemaki», light and dark (brand/README.md) */
  --bg-landscape: url(brand/bg-light.svg);
  --bg-portrait: url(brand/bg-light-portrait.svg);
}

[data-theme="dark"],
:root:not([data-theme="light"]):has(body.dark) {
  --primary: #45a5f5;
  --primary-dark: #1e88e8;
  --bg: #0f2547;
  --card: #18365f;
  --card-2: #1d3f6d;
  --text: #f0f8ff;
  --text-light: #a8c8ec;
  --border: #2c4f80;
  --header-start: #000817;
  --header-end: #0d4f9e;
  --entr: #5fb0f7;
  /* the blue of the hero card, H1's: a gradient from --hero-1 to --hero-2 */
  --hero-1: #2f80ed;
  --hero-2: #1d4ed8;
  --card-raised: color-mix(in srgb, #ffffff 7%, var(--card));
  --usc: #f5c518;
  --on-primary: #011f4e;
  --ok: #6ee7b7;
  --s2: #d95926;
  --note-base: #141414;
  --note-tint: 26%;
  --note-edge: transparent;
  --note-edge-tint: 40%;
  --note-dot-edge-tint: 45%;
  --note-corner-tint: 55%;
  --note-yellow: #e9dd9f;
  --note-yellow-bg: #e9dd9f;
  --note-yellow-edge: #cdbe78;
  --note-yellow-corner: #cdbe78;
  --note-yellow-text: #2a2400;
  --note-yellow-text-light: #6b5f1e;
  --note-yellow-card: #f4ecc4;
  --note-yellow-border: #cdbe78;
  --cheer: #0f7f58;
  --cheer-bg: color-mix(in srgb, #0f7f58 22%, var(--card));
  --cheer-text: #6ee7b7;
  --ko: #fca5a5;
  --ombra: 0 1px 4px rgba(0, 0, 0, 0.25);
  --bg-landscape: url(brand/bg-dark.svg);
  --bg-portrait: url(brand/bg-dark-portrait.svg);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #45a5f5;
    --primary-dark: #1e88e8;
    --bg: #0f2547;
    --card: #18365f;
    --card-2: #1d3f6d;
    --text: #f0f8ff;
    --text-light: #a8c8ec;
    --border: #2c4f80;
    --header-start: #000817;
    --header-end: #0d4f9e;
    --entr: #5fb0f7;
    /* the blue of the hero card, H1's: a gradient from --hero-1 to --hero-2 */
    --hero-1: #2f80ed;
    --hero-2: #1d4ed8;
    --card-raised: color-mix(in srgb, #ffffff 7%, var(--card));
    --usc: #f5c518;
    --on-primary: #011f4e;
    --ok: #6ee7b7;
    --s2: #d95926;
    --note-base: #141414;
    --note-tint: 26%;
    --note-edge: transparent;
    --note-edge-tint: 40%;
    --note-dot-edge-tint: 45%;
    --note-corner-tint: 55%;
    --note-yellow: #e9dd9f;
    --note-yellow-bg: #e9dd9f;
    --note-yellow-edge: #cdbe78;
    --note-yellow-corner: #cdbe78;
    --note-yellow-text: #2a2400;
    --note-yellow-text-light: #6b5f1e;
    --note-yellow-card: #f4ecc4;
    --note-yellow-border: #cdbe78;
    --cheer: #0f7f58;
    --cheer-bg: color-mix(in srgb, #0f7f58 22%, var(--card));
    --cheer-text: #6ee7b7;
    --ko: #fca5a5;
    --ombra: 0 1px 4px rgba(0, 0, 0, 0.25);
    --bg-landscape: url(brand/bg-dark.svg);
    --bg-portrait: url(brand/bg-dark-portrait.svg);
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 17px like H1; the text follows the device setting (UI.md, decision 26). */
html {
  font-size: 17px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* The background as a fixed layer behind everything: it never scrolls or stretches with the page. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg) var(--bg-landscape) center / cover no-repeat;
}

@media (orientation: portrait) {
  body::before {
    background-image: var(--bg-portrait);
  }
}

/* Inside the app (after the first screens) the pages have the flat background of the demo, --bg in both themes (his choice, 22/10/2026, after a try with the header gradient); the first screens keep the brand picture. */
body.in-app::before {
  background: var(--bg);
}