/* MyGrind · tokens.css
 * Design tokens. Every colour, radius and shadow in the app comes from here.
 * Themes only swap these values on <html data-theme="light|dark">.
 */

:root {
  color-scheme: light;

  /* Surfaces */
  --bg: #F6EFE6;
  --bg-glow: #FCE1C8;
  --surface: #FFFFFF;
  --surface-2: #FAF4EC;
  --surface-3: #F0E6DA;

  /* Text */
  --ink: #2A1A12;
  --ink-2: #6F5F55;
  --ink-3: #9E8D81;
  --line: #EDE2D5;

  /* Accent (orange) */
  --accent: #EE6A12;
  --accent-strong: #D45A08;
  --accent-ink: #FFFFFF;
  --accent-soft: #FDE4D0;
  --accent-soft-ink: #8A3A08;

  /* Selected items (dark brown) */
  --selected: #2A1A12;
  --on-selected: #FFFFFF;

  --danger: #C2361F;

  /* Tracks */
  --t-study: #5B3426;
  --t-build: #A8470F;
  --t-learn: #7F9725;
  --t-life: #D877B8;
  --t-study-soft: #F1E5DE;
  --t-build-soft: #F9E3D4;
  --t-learn-soft: #EEF2DA;
  --t-life-soft: #FBE6F3;

  --hatch: rgba(42, 26, 18, 0.07);
  --scrim: rgba(30, 18, 10, 0.45);

  --shadow-sm: 0 1px 2px rgba(74, 40, 16, 0.06);
  --shadow: 0 1px 2px rgba(74, 40, 16, 0.04), 0 10px 30px -14px rgba(74, 40, 16, 0.18);
  --shadow-lg: 0 24px 60px -18px rgba(42, 26, 18, 0.35);

  /* Shape & rhythm */
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-pill: 999px;
  --tap: 48px;
  --gutter: 16px;
  --tabbar-h: 68px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Typography, Apple style.
   * Apple devices use the built-in SF Pro (-apple-system / BlinkMacSystemFont).
   * Everywhere else, Inter: a self-hosted, SF-like variable font (fonts/inter-var.woff2),
   * cached by the service worker so it still works offline. */
  --font: -apple-system, BlinkMacSystemFont, "Inter Variable", "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  /* Big numbers: SF Pro Rounded on Apple (like Fitness/Health), Inter elsewhere. */
  --font-num: ui-rounded, -apple-system, BlinkMacSystemFont, "Inter Variable", system-ui, sans-serif;

  /* Type scale, after Apple's Human Interface Guidelines. */
  --fs-large: clamp(28px, 8vw, 34px); /* Large Title */
  --fs-title: 22px;                   /* Title 2 */
  --fs-title3: 20px;                  /* Title 3 */
  --fs-headline: 17px;                /* Headline */
  --fs-body: 16px;                    /* Body */
  --fs-sub: 15px;                     /* Subheadline */
  --fs-foot: 13px;                    /* Footnote */
  --fs-cap: 12px;                     /* Caption */

  /* Tracking: tighter as text gets bigger, like SF Pro. */
  --track-large: -0.03em;
  --track-title: -0.022em;
  --track-body: -0.011em;
}

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

  --bg: #1B1613;
  --bg-glow: #2E1D12;
  --surface: #27201B;
  --surface-2: #302822;
  --surface-3: #3A302A;

  --ink: #F6EDE5;
  --ink-2: #BDAC9F;
  --ink-3: #8C7C70;
  --line: #3A3029;

  --accent: #FF7A26;
  --accent-strong: #FF8E4A;
  --accent-ink: #1B1613;
  --accent-soft: #3B2617;
  --accent-soft-ink: #FFBE92;

  --selected: #F6EDE5;
  --on-selected: #1B1613;

  --danger: #FF8170;

  --t-study: #D3997D;
  --t-build: #F0823F;
  --t-learn: #B2CB52;
  --t-life: #F0A3D6;
  --t-study-soft: #3A2A23;
  --t-build-soft: #3E2719;
  --t-learn-soft: #2F331C;
  --t-life-soft: #3B2534;

  --hatch: rgba(255, 255, 255, 0.05);
  --scrim: rgba(0, 0, 0, 0.6);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 12px 30px -14px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 60px -18px rgba(0, 0, 0, 0.75);
}

/* Track colour hooks: any element with data-track exposes --c / --tile-bg to its children. */
[data-track="study"] { --c: var(--t-study); --tile-bg: var(--t-study-soft); }
[data-track="build"] { --c: var(--t-build); --tile-bg: var(--t-build-soft); }
[data-track="learn"] { --c: var(--t-learn); --tile-bg: var(--t-learn-soft); }
[data-track="life"] { --c: var(--t-life); --tile-bg: var(--t-life-soft); }

/* Smooth theme switch. The class only exists for ~450ms after a toggle. */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease) !important;
}