/* TallyChores web — design tokens. "Fridge Door": paper cards on a
   grouped-gray canvas, monochrome ink chrome, eight pantry accents that
   are PEOPLE, never status. Values mirror the iOS Theme exactly; no
   other color literals may appear in component CSS. */

@font-face {
  font-family: "Scoreboard";
  src: url("../fonts/archivo-expanded-black-latin.woff2") format("woff2");
  font-weight: 900;
  font-display: block; /* a fallback flash in the brand face is worse than 80ms of blank */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201A, U+201C-201E, U+2026, U+2212;
}
@font-face {
  font-family: "Scoreboard";
  src: url("../fonts/archivo-expanded-black-latin-ext.woff2") format("woff2");
  font-weight: 900;
  font-display: block;
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Eyebrow";
  src: url("../fonts/archivo-semicond-semibold-latin.woff2") format("woff2");
  font-weight: 600;
  font-display: swap; /* eyebrows may swap — they are labels, not the wordmark */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201A, U+201C-201E, U+2026;
}
@font-face {
  font-family: "Eyebrow";
  src: url("../fonts/archivo-semicond-semibold-latin-ext.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Canvas & ink */
  --canvas: #f2f2f7;
  --card: #ffffff;
  --card-elevated: #ffffff;
  --ink: #000000;
  --ink-secondary: rgba(60, 60, 67, 0.6);
  --ink-tertiary: rgba(60, 60, 67, 0.3);
  --fill-secondary: rgba(120, 120, 128, 0.16);
  --fill-tertiary: rgba(118, 118, 128, 0.12);
  --fill-quaternary: rgba(116, 116, 128, 0.08);
  --hairline: rgba(60, 60, 67, 0.29);
  --on-accent: #ffffff;
  --destructive: #d70015;
  --card-shadow: 0 3px 8px rgba(0, 0, 0, 0.04);
  --dialog-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
  --glass-bg: rgba(255, 255, 255, 0.72);
  --scrim: rgba(0, 0, 0, 0.18);

  /* Pantry — light. Accents appear only on: tally strokes, avatars,
     split segments, the confirm CTA, points numerals, the toast numeral. */
  --member-0: #8050ee;
  --member-1: #c7530e;
  --member-2: #008fa8;
  --member-3: #cc2168;
  --member-4: #2e63db;
  --member-5: #5f7d18;
  --member-6: #8a6a00;
  --member-7: #5c6672;

  /* Metrics */
  --radius-card: 22px;
  --radius-input: 14px;
  --radius-row: 12px;
  --pad-screen: 20px;
  --content-max: 1440px;

  /* Type */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-scoreboard: "Scoreboard", "Arial Black", var(--font-ui);
  --font-eyebrow: "Eyebrow", var(--font-ui);

  /* Springs, as linear() approximations of the iOS family */
  --ease-snap: linear(0, 0.317 12%, 0.702 24%, 0.93 36%, 1.03 48%, 1.05 56%, 1.02 70%, 0.998 84%, 1);
  --ease-stamp: linear(0, 0.35 12%, 0.78 26%, 1.06 42%, 1.1 52%, 1.03 70%, 0.99 86%, 1);
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --dur-snap: 420ms;
  --dur-stamp: 420ms;
  --dur-gate: 520ms;
  --dur-settle: 640ms;
  --dur-toast: 460ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #000000;
    --card: #1c1c1e;
    --card-elevated: #2c2c2e;
    --ink: #ffffff;
    --ink-secondary: rgba(235, 235, 245, 0.6);
    --ink-tertiary: rgba(235, 235, 245, 0.3);
    --fill-secondary: rgba(120, 120, 128, 0.32);
    --fill-tertiary: rgba(118, 118, 128, 0.24);
    --fill-quaternary: rgba(118, 118, 128, 0.18);
    --hairline: rgba(84, 84, 88, 0.6);
    --on-accent: #000000; /* dark accents are pastels — dark mode is not an inversion */
    --destructive: #ff6961;
    --card-shadow: none; /* dark separates by surface value and needs no help */
    --glass-bg: rgba(28, 28, 30, 0.72);
    --scrim: rgba(0, 0, 0, 0.45);

    --member-0: #c3b0ff;
    --member-1: #ffb27a;
    --member-2: #4dd9cf;
    --member-3: #ff9ec4;
    --member-4: #6ea6ff;
    --member-5: #a9d96b;
    --member-6: #e8cd6b;
    --member-7: #aeb9c4;
  }
}