/*
 * Colours and fonts for the two themes, each in light and dark.
 *
 * The layout sets <html data-theme="ameixa|vinho"> and, when the user picked
 * one, data-mode="light|dark". Without data-mode the device's setting decides
 * (prefers-color-scheme). Everything else uses these variables, so it follows
 * the theme and mode on its own.
 *
 * Roles: --bg page, --paper cards, --ink text, --muted secondary text,
 * --accent main colour (buttons, highlights), --accent-2 its pair,
 * --on-accent text on the accent, --line borders; --second to --sixth and
 * --ribbon colour the drawn gift boxes; --t0 to --t3 tint the landing hero;
 * --wall, --wall-line and --wood, --wood-dark, --wood-edge draw the shelf
 * (Minhas listas, a friend's page).
 */

/* Ameixa (default): GitHub-like greys, purple accent, the system font. */
:root {
  --bg: #F6F8FA; --paper: #FFFFFF; --ink: #1F2328; --muted: #59636E; --line: #D1D9E0;
  --accent: #8250DF; --accent-2: #6639BA; --on-accent: #FFFFFF;
  --second: #0969DA; --ribbon: #D4A72C; --fourth: #BC4C00; --fifth: #1B7C83; --sixth: #6E7781;
  --t0: #F6F8FA; --t1: #F1F4F8; --t2: #F5F3FA; --t3: #F8F5EE;
  --wall: #F4EEE6; --wall-line: rgba(120, 84, 48, .05); --wood: #C99B6B; --wood-dark: #A97A4C; --wood-edge: #E2BE93;
  --serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --axes: normal;
  --em-style: normal;
  color-scheme: light;
}

/* Vinho: warm peach, wine, sage and butter, with a soft serif. */
:root[data-theme="vinho"] {
  --bg: #F8EADF; --paper: #FFF8F2; --ink: #3B1A24; --muted: #7A5A62; --line: rgba(59, 26, 36, .14);
  --accent: #8F2747; --accent-2: #A33A5A; --on-accent: #FFF8F2;
  --second: #6E8E75; --ribbon: #F1C46B; --fourth: #E7A2A9; --fifth: #C98A2E; --sixth: #B4626E;
  --t0: #F8EADF; --t1: #EAEBDB; --t2: #F7DFE0; --t3: #F5EBD3;
  --wall: #F5E4D6; --wall-line: rgba(143, 39, 71, .05); --wood: #C68E62; --wood-dark: #A06A43; --wood-edge: #E5B892;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --axes: "SOFT" 100, "WONK" 1;
  --em-style: italic;
}

/* Dark, when the device asks for it and the user didn't pick light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]):not([data-theme="vinho"]) {
    --bg: #0D1117; --paper: #151B23; --ink: #F0F6FC; --muted: #9198A1; --line: #3D444D;
    --accent: #8957E5; --accent-2: #9D6CF0; --on-accent: #FFFFFF;
    --second: #4493F8; --ribbon: #E3B341; --fourth: #DB6D28; --fifth: #39C5CF; --sixth: #768390;
    --t0: #0D1117; --t1: #0F1520; --t2: #13111C; --t3: #15130E;
    --wall: #1B1713; --wall-line: rgba(255, 230, 200, .03); --wood: #6E5139; --wood-dark: #4E3826; --wood-edge: #8C6A4C;
    color-scheme: dark;
  }

  :root[data-theme="vinho"]:not([data-mode="light"]) {
    --bg: #1C1013; --paper: #28171C; --ink: #F7E7E3; --muted: #C8A9AF; --line: rgba(247, 231, 227, .14);
    --accent: #E07B8F; --accent-2: #C9667C; --on-accent: #28171C;
    --second: #8FB096; --ribbon: #F1C46B; --fourth: #C98490; --fifth: #D9A04A; --sixth: #B8798A;
    --t0: #1C1013; --t1: #1A1813; --t2: #22121A; --t3: #1F1810;
    --wall: #22151A; --wall-line: rgba(255, 220, 220, .03); --wood: #6D4A36; --wood-dark: #4D3122; --wood-edge: #8A6248;
    color-scheme: dark;
  }
}

/* Dark, when the user picked it. */
:root[data-mode="dark"]:not([data-theme="vinho"]) {
  --bg: #0D1117; --paper: #151B23; --ink: #F0F6FC; --muted: #9198A1; --line: #3D444D;
  --accent: #8957E5; --accent-2: #9D6CF0; --on-accent: #FFFFFF;
  --second: #4493F8; --ribbon: #E3B341; --fourth: #DB6D28; --fifth: #39C5CF; --sixth: #768390;
  --t0: #0D1117; --t1: #0F1520; --t2: #13111C; --t3: #15130E;
  --wall: #1B1713; --wall-line: rgba(255, 230, 200, .03); --wood: #6E5139; --wood-dark: #4E3826; --wood-edge: #8C6A4C;
  color-scheme: dark;
}

:root[data-theme="vinho"][data-mode="dark"] {
  --bg: #1C1013; --paper: #28171C; --ink: #F7E7E3; --muted: #C8A9AF; --line: rgba(247, 231, 227, .14);
  --accent: #E07B8F; --accent-2: #C9667C; --on-accent: #28171C;
  --second: #8FB096; --ribbon: #F1C46B; --fourth: #C98490; --fifth: #D9A04A; --sixth: #B8798A;
  --t0: #1C1013; --t1: #1A1813; --t2: #22121A; --t3: #1F1810;
  --wall: #22151A; --wall-line: rgba(255, 220, 220, .03); --wood: #6D4A36; --wood-dark: #4D3122; --wood-edge: #8A6248;
  color-scheme: dark;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
}

/* The logo: a small gift in the theme's colours (shared/_logo.html.erb). */
.logo-mark {
  .logo-box { fill: var(--accent); }
  .logo-lid { fill: var(--accent-2); }
  .logo-ribbon { fill: var(--ribbon); }
  .logo-bow { fill: none; stroke: var(--ribbon); stroke-width: 2.4; stroke-linecap: round; }
}