/* Orbit skin (spec §10): every color the Orbit screens use, as tokens, in dark (the default) and light; the fonts
   (Sora, and Roboto for Google's button); the page and its night sky; and the classes that color the charts' SVG.

   Intention: templates use classes only (the CSP forbids inline styles), so the look lives in this one file, and a
   new skin is a new copy of it.
   Design: <html data-skin="orbit" data-theme="..."> selects it. The tokens are the canvas's (project/orbit-theme.css)
   under [data-skin="orbit"], and every one again under [data-theme="light"]. The spec's names (§7, §10: --bg,
   --surface, --calories, --over-calories, --danger, ...) are aliases of the canvas tokens, so both vocabularies work,
   every value has one source, and light mode flows through the aliases. Any data-theme other than "light" (dark, or
   auto with JavaScript off) is dark. Chart classes give SVG its colors; geometry stays in SVG attributes (§10). Only
   transform and opacity animate, and motion stops under prefers-reduced-motion. Nothing here loads from another
   origin (§5.15). */

/* ---- fonts, self-hosted (static/fonts, SIL Open Font License; see static/vendor/VENDORED.md) ---- */

/* latin-ext */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/sora-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin (includes · × − – and the euro sign) */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/sora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Roboto Medium, latin only: the lettering of Google's sign-in button, as Google's branding asks (the canvas's
   sign-in boards). Nothing else uses it. */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/roboto-medium-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- tokens: dark, the default ---- */

[data-skin="orbit"] {
  color-scheme: dark;
  --o-scheme: dark;
  /* surfaces, darkest to lightest */
  --o-bg: #0A1122;
  --o-card: #0F182B;
  --o-raised: #131D33;
  --o-track: #19243B;
  --o-line: #1C2840;
  --o-pill: #212E48;
  --o-line-2: #283651;
  --o-line-3: #374763;
  --o-line-4: #4A5A78;
  /* text, quietest to loudest */
  --o-faint: #8C96AB;
  --o-muted: #9CA6BA;
  --o-soft: #C9CED8;
  --o-text: #EDEFF3;
  --o-strong: #FFFFFF;
  --o-on-ring: #0A1122;
  /* nutrients and their over-goal shades */
  --o-protein: #4590E3;
  --o-carbs: #C2872A;
  --o-fat: #DC5F7B;
  --o-protein-over: #2E5FA8;
  --o-carbs-over: #8A5A12;
  --o-fat-over: #B0365A;
  /* signals */
  --o-comet: #EC835A;
  --o-comet-soft: #F2C2AE;
  --o-comet-tint: rgba(236, 131, 90, 0.1);
  --o-comet-line: rgba(236, 131, 90, 0.35);
  --o-warn: #E3BE85;
  --o-warn-tint: rgba(227, 190, 133, 0.16);
  --o-danger: #F49AA6;
  --o-danger-line: rgba(244, 154, 166, 0.35);
  --o-pink: #EEA5B4;
  --o-pink-tint: rgba(238, 165, 180, 0.16);
  --o-usda-bg: #163056;
  --o-usda: #8CC8FF;
  --o-blue-soft: #9CC4F0;
  --o-blue-bright: #6CB8FF;
  --o-amber: #F5B74E;
  --o-rose: #F27A8C;
  --o-flare: #F2EDE4;
  --o-ring-tint: rgba(242, 237, 228, 0.32);
  --o-shadow: rgba(0, 0, 0, 0.5);
  --o-scrim: rgba(4, 8, 20, 0.66);
  /* two-line charts (blood pressure): a validated pair, kept apart from the macro colors */
  --o-series-1: #4F98E0;
  --o-series-2: #BC852A;
  /* the night sky's glow */
  --o-sky-glow: rgba(70, 110, 210, 0.22);
  --o-sky-glow-2: rgba(50, 80, 170, 0.14);
  /* Google's sign-in button (its dark variant) */
  --o-g-bg: #131314;
  --o-g-hover: #1F1F21;
  --o-g-line: #8E918F;
  --o-g-text: #E3E3E3;

  /* the spec's names (§7, §10), as aliases: one source for every value, and light mode flows through them */
  --bg: var(--o-bg);
  --surface: var(--o-card);
  --surface-2: var(--o-raised);
  --track: var(--o-track);
  --selected: var(--o-pill);
  --line: var(--o-line);
  --line-strong: var(--o-line-2);
  --line-input: var(--o-line-4);
  --line-dial: var(--o-line-3);
  --text: var(--o-text);
  --text-2: var(--o-soft);
  --text-muted: var(--o-muted);
  --text-faint: var(--o-faint);
  --text-strong: var(--o-strong);
  --calories: var(--o-flare); /* cream in dark, its ink twin #1D2027 in light */
  --protein: var(--o-protein);
  --carbs: var(--o-carbs);
  --fat: var(--o-fat);
  --over-calories: var(--o-comet);
  --over-protein: var(--o-protein-over);
  --over-carbs: var(--o-carbs-over);
  --over-fat: var(--o-fat-over);
  --tint-protein: var(--o-blue-soft);
  --tint-carbs: var(--o-warn);
  --tint-fat: var(--o-pink);
  --limit-over: var(--o-danger);
  --usda-bg: var(--o-usda-bg);
  --usda-text: var(--o-usda);
  --danger: var(--o-danger); /* Remove and Delete, red in both themes */
}

/* ---- tokens: light ---- */

[data-skin="orbit"][data-theme="light"] {
  color-scheme: light;
  --o-scheme: light;
  --o-bg: #F6F4EF;
  --o-card: #FFFFFF;
  --o-raised: #EFECE6;
  --o-track: #E7E4DC;
  --o-line: #E2DED5;
  --o-pill: #E6E2D9;
  --o-line-2: #D4CFC4;
  --o-line-3: #BFB9AD;
  --o-line-4: #A19B8F;
  --o-faint: #676D78;
  --o-muted: #565D68;
  --o-soft: #363C46;
  --o-text: #14171C;
  --o-strong: #090B0E;
  --o-on-ring: #FFFFFF;
  --o-protein: #2E73C6;
  --o-carbs: #A86E12;
  --o-fat: #C64466;
  --o-protein-over: #1D4F8F;
  --o-carbs-over: #6E470C;
  --o-fat-over: #8F2445;
  --o-comet: #B94E1F;
  --o-comet-soft: #A8461F;
  --o-comet-tint: rgba(185, 78, 31, 0.1);
  --o-comet-line: rgba(185, 78, 31, 0.35);
  --o-warn: #8A5A12;
  --o-warn-tint: rgba(138, 90, 18, 0.12);
  --o-danger: #B23A57;
  --o-danger-line: rgba(178, 58, 87, 0.35);
  --o-pink: #A8344F;
  --o-pink-tint: rgba(168, 52, 79, 0.1);
  --o-usda-bg: #E1ECF9;
  --o-usda: #1E5DA6;
  --o-blue-soft: #2E6FBF;
  --o-blue-bright: #2E73C6;
  --o-amber: #94600B;
  --o-rose: #B8394F;
  --o-flare: #1D2027;
  --o-ring-tint: rgba(29, 32, 39, 0.18);
  --o-shadow: rgba(20, 24, 30, 0.14);
  --o-scrim: rgba(20, 24, 30, 0.32);
  --o-series-1: #2E73C6;
  --o-series-2: #94600B;
  --o-sky-glow: transparent; /* light mode has no glow (the canvas hides the sky's background) */
  --o-sky-glow-2: transparent;
  --o-g-bg: #FFFFFF;
  --o-g-hover: #F2F2F2;
  --o-g-line: #747775;
  --o-g-text: #1F1F1F;
}

/* ---- the page ---- */

/* The background sits on <html>, so the night sky (z-index -1) paints above it and below the content. */
html[data-skin="orbit"] {
  background: var(--o-bg);
  color: var(--o-text);
  font-family: "Sora", system-ui, sans-serif;
}

/* The body stays transparent so the sky shows through it. */
html[data-skin="orbit"] body {
  margin: 0;
  min-height: 100vh;
  background: transparent;
}

/* ---- the night sky (§10) ----
   Markup, once per page: <div class="stars" aria-hidden="true"><i></i><i></i></div>.
   A faint blue glow; a far layer of small stars drifting slowly; a near layer of bright stars drifting faster, in two
   groups that twinkle out of step; and a shooting star every 16 s. Each layer is one tile larger than the screen and
   moves by exactly one tile, so the loop is seamless. In light mode the stars become faint ink dots. */
.stars {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(1100px 700px at 78% -12%, var(--o-sky-glow), transparent 65%),
    radial-gradient(900px 640px at -5% 108%, var(--o-sky-glow-2), transparent 60%);
}

/* every layer is an absolutely placed box */
.stars::before,
.stars::after,
.stars i {
  content: "";
  position: absolute;
}

/* the far layer: small, dim stars on a 240-unit tile, drifting slowly */
.stars::before {
  inset: -240px 0 0 -240px;
  background-image: radial-gradient(1.5px 1.5px at 12px 24px, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1.5px 1.5px at 64px 140px, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1.5px 1.5px at 110px 60px, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1.5px 1.5px at 170px 190px, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1.5px 1.5px at 200px 30px, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1.5px 1.5px at 30px 210px, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1.5px 1.5px at 150px 110px, rgba(255, 255, 255, 0.35), transparent);
  background-size: 240px 240px;
  animation: o-drift-far 150s linear infinite;
}

/* the near layer's two groups share a 420-unit tile */
.stars::after,
.stars i:first-child {
  inset: -420px 0 0 -420px;
  background-size: 420px 420px;
}

/* near group one */
.stars::after {
  background-image: radial-gradient(2px 2px at 60px 80px, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(2.5px 2.5px at 300px 40px, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(2px 2px at 210px 260px, rgba(255, 255, 255, 0.75), transparent);
  animation: o-drift-near 100s linear infinite, o-twinkle 6s ease-in-out infinite;
}

/* near group two, twinkling out of step */
.stars i:first-child {
  background-image: radial-gradient(2.5px 2.5px at 380px 330px, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(2px 2px at 120px 370px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(2px 2px at 350px 170px, rgba(255, 255, 255, 0.55), transparent);
  animation: o-drift-near 100s linear infinite, o-twinkle 9s ease-in-out -4s infinite;
}

/* the shooting star */
.stars i:last-child {
  top: 9%;
  left: 62%;
  width: 160px;
  height: 1.5px;
  border-radius: 1px;
  opacity: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
  animation: o-meteor 16s ease-in 3s infinite;
}

@keyframes o-drift-far { to { transform: translate3d(240px, 240px, 0); } }
@keyframes o-drift-near { to { transform: translate3d(420px, 420px, 0); } }
@keyframes o-twinkle { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes o-meteor {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-22deg); }
  1% { opacity: 1; }
  6%, 100% { opacity: 0; transform: translate3d(-460px, 186px, 0) rotate(-22deg); }
}

/* motion stops for people who ask for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .stars::before,
  .stars::after,
  .stars i { animation: none; }
  .stars i:last-child { display: none; }
}

/* light mode: faint ink dots, no glow, no shooting star */
[data-skin="orbit"][data-theme="light"] .stars { background: none; filter: invert(1); opacity: 0.35; }
[data-skin="orbit"][data-theme="light"] .stars i:last-child { display: none; }

/* ---- charts (app/charts): SVG colors come from these classes; geometry stays in SVG attributes (§10) ---- */

/* Rings: a track circle under each arc circle. */
.ring-track { fill: none; stroke: var(--o-track); }
.ring-calories { fill: none; stroke: var(--calories); }
.ring-protein { fill: none; stroke: var(--protein); }
.ring-carbs { fill: none; stroke: var(--carbs); }
.ring-fat { fill: none; stroke: var(--fat); }

/* The Comet (§7): <g class="comet comet-protein"> holds the streak's segment paths and its head circle. */
.comet path { fill: none; stroke: var(--comet); }
.comet circle { fill: var(--comet); }
.comet-calories { --comet: var(--over-calories); }
.comet-protein { --comet: var(--over-protein); }
.comet-carbs { --comet: var(--over-carbs); }
.comet-fat { --comet: var(--over-fat); }

/* The dial: its circle, the brighter elapsed part, ticks and labels. */
.dial-track { fill: none; stroke: var(--o-line); }
.dial-elapsed { fill: none; stroke: var(--o-line-3); }
.dial-tick { stroke: var(--o-line-4); }
.dial-tick-major { stroke: var(--o-faint); }
.dial-label { fill: var(--o-faint); font-family: "Sora", system-ui, sans-serif; font-size: 9.5px; letter-spacing: 1.4px; }

/* Entry dots: a card-colored outline, filled with the main macro's color (DialMark.macro). */
.dial-dot { stroke: var(--o-card); }
.dot-calories { fill: var(--calories); }
.dot-protein { fill: var(--protein); }
.dot-carbs { fill: var(--carbs); }
.dot-fat { fill: var(--fat); }

/* The flare and the now marker: <g class="flare"> holds the pieces; a glow and a ring mark now. */
.flare path { fill: none; stroke: var(--o-flare); stroke-linecap: round; }
.flare-glow { fill: var(--o-flare); fill-opacity: 0.12; }
.now-marker { fill: var(--o-card); stroke: var(--o-flare); }

/* Trends: gridlines, the baseline, and dashed goal or target lines. */
.chart-grid { stroke: var(--o-line); }
.chart-axis { stroke: var(--o-line-2); }
.chart-target { fill: none; stroke: var(--o-muted); stroke-dasharray: 4 3; }

/* Bars: opacity comes from settings as a fill-opacity attribute; today's bar is always solid (§6.4). */
.chart-bar { fill: var(--calories); }
.chart-bar-today { fill-opacity: 1; }
.chart-bar-picked { fill: var(--o-strong); fill-opacity: 1; }

/* Day lines and dots; add series-1 or series-2 for blood pressure's two lines. */
.chart-line { fill: none; stroke: var(--series, var(--calories)); stroke-linecap: round; stroke-linejoin: round; }
.chart-dot { fill: var(--series, var(--calories)); stroke: var(--o-card); }
.series-1 { --series: var(--o-series-1); }
.series-2 { --series: var(--o-series-2); }

/* Sparklines: round caps so a lone day (a zero-length subpath) shows as a dot. */
.spark-line { fill: none; stroke: var(--o-soft); stroke-linecap: round; stroke-linejoin: round; }
.spark-line-2 { fill: none; stroke: var(--o-line-4); stroke-linecap: round; stroke-linejoin: round; }
.spark-target { fill: none; stroke: var(--o-line-3); stroke-dasharray: 3 3; }
.spark-end { fill: var(--calories); stroke: var(--o-bg); }

/* ---- htmx (its own injected <style> is off: the CSP forbids inline styles) ---- */

.htmx-indicator { opacity: 0; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; transition: opacity 200ms ease-in; }