/* Deal With It design tokens — "Bright pop arcade".
   Contrast pairs used for text are checked for WCAG AA (≥ 4.5:1),
   outlines and icons for ≥ 3:1. */

@font-face {
  font-family: 'Fredoka';
  src: url('../fonts/fredoka-var.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('../fonts/atkinson-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('../fonts/atkinson-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  --font-display: 'Fredoka', 'Nunito', ui-rounded, system-ui, sans-serif;
  --font-body: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Pop palette (context + accent colours) */
  --pink: #FF5D8F;
  --teal: #00C2A8;
  --orange: #FF8A3D;
  --sunny: #FFD23F;
  --sky: #3DA5FF;
  --lime: #8BD346;
  --violet: #B69CFF;
  --coral: #FF7A6B;

  /* Light theme */
  --table: #5B3CC4;
  --table-dot: #6748D0;
  --on-table: #FFFFFF;
  --on-table-muted: #E9E2FF;
  --ink: #2A1A6E;
  --card: #FFFFFF;
  --card-alt: #F5F1FF;
  --card-text: #2A1A6E;
  --card-muted: #5A4A96;
  --card-line: #2A1A6E;
  --shadow: #2A1A6E;
  --surface: #FFFFFF;
  --field: #FFFFFF;
  --field-border: #6B5BB0;
  --overdue-bg: #FFE0E5;
  --overdue-text: #A3122A;
  --today-bg: #FFD23F;
  --today-text: #2A1A6E;
  --soon-bg: #FFF1BF;
  --date-bg: #ECE6FF;
  --done-bg: #E1F8F3;
  --danger: #C21E3A;
  --focus: #FFD23F;
  --focus-inner: #2A1A6E;
  --chip-ink: #1D1150;
  --backdrop: rgb(27 18 64 / 0.6);

  --radius: 16px;
  --radius-sm: 10px;
  --line: 3px;
  --lift: 5px;
  --gap: 1rem;
  --tap: 48px;
  --rail-w: 15rem;
  --topbar-h: 4.25rem;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: light;
}

/* Dark theme: explicit choice … */
:root[data-theme="dark"] {
  --table: #1B1240;
  --table-dot: #241858;
  --on-table: #F4F1FF;
  --on-table-muted: #C9BEF5;
  --ink: #0B0620;
  --card: #2A1F5C;
  --card-alt: #322670;
  --card-text: #F4F1FF;
  --card-muted: #CBC0F7;
  --card-line: #B9A9FF;
  --shadow: #07041A;
  --surface: #2A1F5C;
  --field: #1F1648;
  --field-border: #9D8BEA;
  --overdue-bg: #5A1023;
  --overdue-text: #FFD2DA;
  --today-bg: #FFD23F;
  --today-text: #1D1150;
  --soon-bg: #4B3F12;
  --date-bg: #3A2D7E;
  --done-bg: #12483F;
  --danger: #FF8A9C;
  --focus: #FFD23F;
  --focus-inner: #0B0620;
  --backdrop: rgb(5 3 16 / 0.75);
  color-scheme: dark;
}

/* … or following the device. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --table: #1B1240;
    --table-dot: #241858;
    --on-table: #F4F1FF;
    --on-table-muted: #C9BEF5;
    --ink: #0B0620;
    --card: #2A1F5C;
    --card-alt: #322670;
    --card-text: #F4F1FF;
    --card-muted: #CBC0F7;
    --card-line: #B9A9FF;
    --shadow: #07041A;
    --surface: #2A1F5C;
    --field: #1F1648;
    --field-border: #9D8BEA;
    --overdue-bg: #5A1023;
    --overdue-text: #FFD2DA;
    --today-bg: #FFD23F;
    --today-text: #1D1150;
    --soon-bg: #4B3F12;
    --date-bg: #3A2D7E;
    --done-bg: #12483F;
    --danger: #FF8A9C;
    --focus: #FFD23F;
    --focus-inner: #0B0620;
    --backdrop: rgb(5 3 16 / 0.75);
    color-scheme: dark;
  }
}

/* Context colours as classes (chips, dots, card accents). */
.ctx-pink { --ctx: var(--pink); }
.ctx-teal { --ctx: var(--teal); }
.ctx-orange { --ctx: var(--orange); }
.ctx-sunny { --ctx: var(--sunny); }
.ctx-sky { --ctx: var(--sky); }
.ctx-lime { --ctx: var(--lime); }
.ctx-violet { --ctx: var(--violet); }
.ctx-coral { --ctx: var(--coral); }
.ctx-none { --ctx: var(--card-alt); }