/* Theme layer. Loads after design/yravg-ui.css and maps each theme onto the same token names, so every
   component, preview and page follows. html[data-skin] picks the palette, html[data-theme] light or dark.
   buds: the yravg brand (github.com/yravg/yravgBuds, brand/tokens.css). tide: the yravg Route palette from the
   same repo (Tide mockups). neutral: the plain grey palette the Light and Dark choices use. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 600; font-display: swap; src: url("brand/Fredoka-SemiBold.woff2") format("woff2"); }

:root {
  --brand-green: #22C55E; --brand-lime: #B6F35C; --brand-emerald: #0E9F6E; --brand-ink: #0A0F0C; --cheek: #F7A8B8;
  --font-display: "Fredoka", "Plus Jakarta Sans", system-ui, sans-serif;
  --r-card: 14px; --r-input: 10px;
  --spring-panel: cubic-bezier(.16, 1, .3, 1); --spring-ui: cubic-bezier(.2, .9, .25, 1.12);
}

/* buds (default). green-ink is the readable green; brand-green is for fills only */
:root, :root[data-skin="buds"] {
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --accent: #0E7A47; --on-accent: #FFFFFF; --ok: #0E7A47;
  --shell: #E7F3EC; --canvas: #F3FBF6; --surface: #FFFFFF; --line: #DCE8E1; --line-strong: #BFD3C7; --track: #E9F7EE;
  --ink: #0A0F0C; --ink-dim: rgba(10, 15, 12, .66); --ink-faint: rgba(10, 15, 12, .48); --ink-off: rgba(10, 15, 12, .28);
}
:root[data-theme="dark"], :root[data-skin="buds"][data-theme="dark"] {
  --accent: #4ADE80; --on-accent: #0A0F0C; --ok: #4ADE80;
  --shell: #060B09; --canvas: #0B1310; --surface: #111C18; --line: #24372F; --line-strong: #33493F; --track: #12241B;
  --ink: #E8F2EC; --ink-dim: rgba(232, 242, 236, .68); --ink-faint: rgba(232, 242, 236, .48); --ink-off: rgba(232, 242, 236, .28);
}

/* tide: sea foam and deep sea green */
:root[data-skin="tide"] {
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --accent: #0A3B22; --on-accent: #FFFFFF; --ok: #0E7A47;
  --shell: #DCEEE4; --canvas: #EEF7F2; --surface: #FFFFFF; --line: #BFE0CB; --line-strong: #A7D3B9; --track: #E9F7EE;
  --ink: #0A0F0C; --ink-dim: rgba(10, 15, 12, .66); --ink-faint: rgba(10, 15, 12, .48); --ink-off: rgba(10, 15, 12, .28);
}
:root[data-skin="tide"][data-theme="dark"] {
  --accent: #9BE8BC; --on-accent: #0A0F0C; --ok: #4ADE80;
  --shell: #030605; --canvas: #050706; --surface: #0A1A12; --line: #123D2A; --line-strong: #1C5239; --track: #0A2A1B;
  --ink: #E9F7EE; --ink-dim: rgba(233, 247, 238, .7); --ink-faint: rgba(233, 247, 238, .5); --ink-off: rgba(233, 247, 238, .28);
}

/* neutral: the Light and Dark choices */
:root[data-skin="neutral"] {
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-display: var(--font);
  --accent: #0B75B0; --on-accent: #FFFFFF; --ok: #15803D;
  --shell: #F5F5F5; --canvas: #FCFCFC; --surface: #FFFFFF; --line: #E5E5E5; --line-strong: #D4D4D4; --track: #F2F2F2;
  --ink: #0A0A0A; --ink-dim: #737373; --ink-faint: rgba(0, 0, 0, .4); --ink-off: rgba(0, 0, 0, .24);
}
:root[data-skin="neutral"][data-theme="dark"] {
  --accent: #1D93D2; --on-accent: #0A0A0A; --ok: #4ADE80;
  --shell: #0C0C0D; --canvas: #121213; --surface: #19191B; --line: #262628; --line-strong: #343437; --track: #1F1F21;
  --ink: #EDEDED; --ink-dim: #8F8F8F; --ink-faint: rgba(255, 255, 255, .4); --ink-off: rgba(255, 255, 255, .24);
}

h1, h2, .brand, .lib-h1 { font-family: var(--font-display); font-weight: 600; letter-spacing: 0; }
:root[data-skin="neutral"] h1, :root[data-skin="neutral"] h2, :root[data-skin="neutral"] .lib-h1 { letter-spacing: -.02em; }
.btn { color: var(--on-accent); }
.btn.ghost { color: var(--ink); }
.mascot { display: block; height: auto; pointer-events: none; user-select: none; }
/* Tide belongs to the Tide theme; Bud everywhere else */
.mascot.tide, :root[data-skin="tide"] .mascot.bud { display: none; }
:root[data-skin="tide"] .mascot.tide { display: block; }