/* Compizo design tokens.
   One file every page loads first. Light is the default; theme.js sets
   data-theme="dark" on <html> when the user (or their OS) prefers it.

   The look: two halves — a cool light grey and a deep navy — with one violet
   accent. Montserrat throughout, self-hosted so the CSP (font-src 'self')
   never has to change. */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/montserrat-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+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  /* Carries the rupee sign (U+20B9). */
  src: url('fonts/montserrat-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  /* the two halves */
  --mist: #DCDDE2;
  --navy: #24263A;
  --navy-2: #2E3048;
  --on-navy: #EEEDF4;
  --on-navy-muted: #A7A9BE;
  --on-navy-line: rgba(238, 237, 244, .16);

  /* surfaces */
  --page: #E7E6EC;
  --paper: #F4F4F6;
  --card: #FBFBFC;
  --well: #EEEEF2;

  /* text + lines */
  --text: #23253A;
  --muted: #63657A;
  --line: #D2D2DA;
  --line-strong: #B4B5C3;

  /* the one accent */
  --violet: #7A5BC0;
  --violet-hover: #6A4BB0;
  --violet-ink: #6447A8;          /* violet used as text on light surfaces */
  --violet-soft: rgba(122, 91, 192, .12);

  /* report semantics, tuned to sit with the violet rather than fight it */
  --green: #1F7F55;
  --cyan: #2A6F9E;
  --amber: #9A6414;
  --red: #B83A45;
  --purple: var(--violet-ink);

  /* aliases the app's existing markup (app.js) reads */
  --ink: var(--well);
  --surface: var(--card);
  --surface-2: var(--card);
  --track: #E2E2E8;
  --signal: var(--violet);
  --warn: var(--amber);
  --bad: var(--red);
  --good: var(--green);
  --great: var(--green);
  --fg: var(--text);

  --sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: var(--sans);

  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 14px;

  /* motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --shadow-frame: 0 40px 80px -40px rgba(36, 38, 58, .45), 0 2px 6px rgba(36, 38, 58, .06);
}

[data-theme="dark"] {
  color-scheme: dark;

  --mist: #2B2D40;
  --navy: #15161F;
  --navy-2: #1E2030;
  --on-navy: #EEEDF4;
  --on-navy-muted: #9C9EB4;
  --on-navy-line: rgba(238, 237, 244, .12);

  --page: #101118;
  --paper: #191A25;
  --card: #1F2130;
  --well: #171823;

  --text: #ECEBF3;
  --muted: #9C9EB3;
  --line: #303247;
  --line-strong: #44475F;

  --violet: #8E70D6;
  --violet-hover: #9C80E0;
  --violet-ink: #B39DEB;
  --violet-soft: rgba(142, 112, 214, .16);

  --green: #4CC38A;
  --cyan: #5AAEE0;
  --amber: #E2A84B;
  --red: #EB6B73;

  --track: #2C2E42;

  --shadow-frame: 0 40px 90px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .04);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 450 15px/1.6 var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; line-height: 1.2; }
p { margin: 0; }
a { color: inherit; }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--violet); color: #fff; }

:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- buttons ---------- */
/* Every pressable thing scales slightly on press: the interface confirms it
   heard you before anything else happens. */
.btn-solid, .btn-ghost, .btn-light {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--r-sm);
  font: 600 14px/1.2 var(--sans); letter-spacing: .01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1px solid transparent;
  transition: transform 160ms var(--ease-out), background-color 160ms ease,
              border-color 160ms ease, color 160ms ease;
}
.btn-solid:active, .btn-ghost:active, .btn-light:active { transform: scale(.97); }
.btn-solid { background: var(--violet); color: #fff; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-light { background: #fff; color: #24263A; box-shadow: 0 10px 24px -12px rgba(20, 20, 40, .45); }
@media (hover: hover) and (pointer: fine) {
  .btn-solid:hover { background: var(--violet-hover); }
  .btn-ghost:hover { border-color: var(--violet); color: var(--violet-ink); }
  .btn-light:hover { background: #F1EEF9; }
}
.btn-solid.lg, .btn-ghost.lg, .btn-light.lg { padding: 15px 30px; font-size: 15px; }
.btn-solid.sm, .btn-ghost.sm, .btn-light.sm { padding: 7px 13px; font-size: 13px; }
.btn-solid.full, .btn-ghost.full, .btn-light.full { width: 100%; }

/* theme toggle (shared) */
.themeBtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 34px; padding: 0;
  background: none; border: 1px solid currentColor; border-radius: var(--r-sm);
  color: inherit; opacity: .7; cursor: pointer;
  transition: opacity 160ms ease, transform 160ms var(--ease-out);
}
.themeBtn:active { transform: scale(.95); }
@media (hover: hover) and (pointer: fine) { .themeBtn:hover { opacity: 1; } }
.themeBtn svg { width: 15px; height: 15px; }

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