/*
 * Amable's visual language on the web, shared by every page. The tokens are the
 * desktop app's (apps/desktop/src/renderer/src/assets/main.css): keep the two in
 * step. Fonts are DDOBLEE's pairing, served from /fonts (SIL OFL 1.1, the
 * @fontsource 5.3.0 builds the app bundles): Syne for titles, DM Sans for text,
 * DM Mono for data. Grovio lives only in the wordmark, as outlines.
 */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url(/fonts/dm-sans-latin-opsz-normal.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;
}
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/syne-latin-wght-normal.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;
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/dm-mono-latin-400-normal.woff2) format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/dm-mono-latin-500-normal.woff2) format("woff2");
}

:root {
  color-scheme: dark;

  --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Syne", "DM Sans", ui-sans-serif, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ground and the one signal: green lives on CTAs, LEDs and numbers, never on running text */
  --ground: #191919;
  --signal: #1ff431;
  --signal-ink: #080808;

  /* ink ladder: text is never below ink-50, interactive text never below ink-56 */
  --ink-95: rgb(248 248 248 / 0.95);
  --ink-85: rgb(248 248 248 / 0.85);
  --ink-76: rgb(248 248 248 / 0.76);
  --ink-70: rgb(248 248 248 / 0.7);
  --ink-56: rgb(248 248 248 / 0.56);
  --ink-50: rgb(248 248 248 / 0.5);
  --ink-40: rgb(248 248 248 / 0.4);

  /* surfaces */
  --glass: rgb(40 40 40 / 0.7);
  --row: rgb(248 248 248 / 0.05);
  --row-hover: rgb(248 248 248 / 0.1);
  --row-done: rgb(248 248 248 / 0.02);
  --border: rgb(255 255 255 / 0.07);

  --radius-group: 24px;
  --radius-pop: 20px;
  --radius-row: 12px;
  --radius-pill: 22px;

  --shadow-glass: inset 2px 4px 16px rgb(248 248 248 / 0.06);
  --shadow-panel: inset 2px 4px 16px rgb(248 248 248 / 0.06), 0 0 0 1px rgb(255 255 255 / 0.04);
  --shadow-led: 0 0 0 2px rgb(31 244 49 / 0.15), 0 0 8px rgb(31 244 49 / 0.5);

  /* motion: enters and settles, never bounces */
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
}

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

body {
  background: var(--ground);
  color: var(--ink-95);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* The single light source every hairline mask points at. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60% 50% at 18% -8%, rgb(248 248 248 / 0.06), transparent 65%);
}

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
::selection { background: rgb(248 248 248 / 0.22); color: #f8f8f8; }

/* The header lockup (brand/lockup-inverted.svg, copied here by brand/generate.py). */
.lockup { display: inline-block; border-radius: 8px; }
.lockup img { display: block; height: 32px; width: auto; }

/* A glass panel on the ground; pair with .hairline. */
.glass { background: var(--glass); box-shadow: var(--shadow-panel); }

/* A 1.5px hairline that exists only near the light; the host's radius shapes it. */
.hairline { position: relative; isolation: isolate; }
.hairline::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1.5px solid rgb(255 255 255 / 0.08);
  mask-image: linear-gradient(160deg, black, transparent 50%);
}

/* LEDs. Every LED has its label next to it. */
.led { display: inline-block; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; }
.led-on { background: var(--signal); box-shadow: var(--shadow-led); }

/* Uppercase label (kit Foot.counter). */
.caption {
  font-size: 12px;
  line-height: 1.65;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-50);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Windows High Contrast strips backgrounds and shadows; keep the meaning. */
@media (forced-colors: active) {
  .led { border: 2px solid CanvasText; }
  .led-on { background: Highlight; forced-color-adjust: none; }
  .glass { border: 1px solid CanvasText; }
}