/* The Loop — design tokens, from the "Homeschool lesson tracker app" design canvas.
   Newsreader for headings, Karla for everything else. Everything in app.css reads from here. */
:root {
  color-scheme: light dark;

  /* ground */
  --ground: #e3e8dc;
  --ground-glow: radial-gradient(ellipse 60% 40% at 100% 0%, #eef0e0 0%, #e3e8dc 70%);
  --surface: #f7f6ec;          /* cards */
  --surface-2: #f4f5ee;        /* quiet buttons, insets */
  --surface-3: #ffffff;        /* checkboxes, inputs */
  --hover: #eef1e6;

  /* ink */
  --ink: #22352a;
  --ink-2: #3f5546;
  --muted: #4f6656;
  --faint: #8a9a8c;
  --disabled: #a3b0a1;

  /* lines */
  --line: #c7d1bf;
  --line-2: #dde3d4;
  --line-3: #d9dfd0;
  --vine: #a9bba2;

  /* accents */
  --accent: #3d6b4f;
  --accent-hover: #325a41;
  --on-accent: #f6f4e8;
  --terracotta: #c96f2c;
  --highlight: #f5e3a0;
  --leaf-a: #3d6b4f;
  --leaf-b: #5f8a63;
  --focus: #c96f2c;
  --danger: #a8452f;
  --ok: #3d6b4f;

  /* translucent button fills: they sit on the card without becoming solid chips */
  --tint-accent: rgba(61, 107, 79, .11);
  --tint-accent-hi: rgba(61, 107, 79, .18);
  --tint-terracotta: rgba(201, 111, 44, .13);
  --tint-danger: rgba(168, 69, 47, .12);
  --tint-danger-hi: rgba(168, 69, 47, .2);
  --tint-terracotta-hi: rgba(201, 111, 44, .22);

  /* live pill */
  --pill-bg: #f5e9a9;
  --pill-ink: #5c4a08;
  --pill-dot: #c9a613;

  /* subject colours */
  --c-math: #e0893a;
  --c-spelling: #e9b53d;
  --c-literature: #e3947f;
  --c-history: #a86a3c;
  --c-grammar: #7fa66f;
  --c-science: #4f8a7b;
  --c-art: #9a6f8e;

  /* type */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font: "Karla", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-11: 11px; --fs-13: 13px; --fs-15: 15px; --fs-16: 16px; --fs-17: 17px; --fs-19: 19px;
  --fs-22: 22px; --fs-28: 28px; --fs-40: 40px; --fs-48: 48px;
  --lh-tight: 1.1; --lh-body: 1.45;

  /* space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;

  /* shape */
  --r-pill: 999px; --r-2: 10px; --r-3: 12px; --r-4: 20px;
  --shadow-card: 0 1px 0 #cfd7c6, 0 14px 32px -20px rgba(34, 53, 42, .35);

  --wreath: 64px;
  --tap: 48px;
  --bar-h: 62px;
  --content-max: 940px;
  --gutter: var(--s-5);
  --focus-w: 3px;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 160ms;
  --t-base: 220ms;
}
@media (min-width: 720px) {
  :root { --gutter: var(--s-8); }
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #171d18;
    --ground-glow: radial-gradient(ellipse 60% 40% at 100% 0%, #202a21 0%, #171d18 70%);
    --surface: #202821;
    --surface-2: #262f26;
    --surface-3: #1b221c;
    --hover: #2c352c;

    --ink: #edf0e3;
    --ink-2: #c6d1c4;
    --muted: #a4b3a4;
    --faint: #8a9a8c;
    --disabled: #6d7a6d;

    --line: #374235;
    --line-2: #303a2f;
    --line-3: #333d32;
    --vine: #4a5a48;

    --accent: #7fae8c;
    --accent-hover: #93bd9d;
    --on-accent: #14201a;
    --terracotta: #e2955c;
    --highlight: rgba(245, 227, 160, .22);
    --leaf-a: #6f9d7c;
    --leaf-b: #8bb391;
    --focus: #e2955c;
    --danger: #e08a76;
    --ok: #7fae8c;

    --tint-accent: rgba(127, 174, 140, .16);
    --tint-accent-hi: rgba(127, 174, 140, .26);
    --tint-terracotta: rgba(226, 149, 92, .16);
    --tint-danger: rgba(224, 138, 118, .16);
    --tint-danger-hi: rgba(224, 138, 118, .26);
    --tint-terracotta-hi: rgba(226, 149, 92, .26);

    --pill-bg: rgba(233, 181, 61, .16);
    --pill-ink: #eccf74;
    --pill-dot: #e9b53d;

    --c-math: #e59a52;
    --c-spelling: #edc25c;
    --c-literature: #eaa693;
    --c-history: #c08355;
    --c-grammar: #96bb87;
    --c-science: #6aa598;
    --c-art: #b389a7;

    --shadow-card: 0 1px 0 rgba(0, 0, 0, .3), 0 14px 32px -20px rgba(0, 0, 0, .7);
  }
}
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; }
}

/* TV mode: same palette, 10-foot scale. */
html.tv {
  --fs-11: 20px; --fs-13: 24px; --fs-15: 28px; --fs-16: 30px; --fs-17: 32px; --fs-19: 34px;
  --fs-22: 40px; --fs-28: 52px; --fs-40: 72px; --fs-48: 84px;
  --s-1: 6px; --s-2: 12px; --s-3: 18px; --s-4: 24px; --s-5: 30px; --s-6: 36px; --s-8: 48px; --s-10: 60px;
  --r-2: 14px; --r-3: 18px; --r-4: 30px;
  --tap: 96px;
  --bar-h: 96px;
  --content-max: 1640px;
  --gutter: 5vw;
  --focus-w: 6px;
}