/* SecondLook design tokens.
 * Look: warm off-white canvas, white cards with hairlines, one coral accent, tinted pill
 * labels, a geometric sans. Two modes of one product:
 *   Sober Mode  – planning: calm, clear, a little more detail.
 *   Night Mode  – the prompt, check-in, alert, reminders, contact view: the same light look,
 *                 one action, big thumb targets, large type, AAA contrast.
 * Components only use the semantic tokens (--bg, --text, --accent, …); putting
 * data-mode="night" on any element re-themes everything inside it. */

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../assets/fonts/atkinson-hyperlegible-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../assets/fonts/atkinson-hyperlegible-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("../assets/fonts/outfit-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* ---- raw palette: day ---- */
  --c-canvas: #FFFDF9;      /* warm page */
  --c-white: #FFFFFF;       /* cards */
  --c-card-2: #FAF7F4;      /* icon tiles, stat tiles, input fill */
  --c-line: #EEE8E3;        /* hairlines */
  --c-ink: #2C2C2C;         /* 13.8:1 on canvas */
  --c-ink-2: #6B6865;       /* 5.5:1 */
  --c-coral: #C63D1F;       /* buttons + links: white on it 5.1:1 */
  --c-coral-bright: #FF6B4A;/* decoration only (logo tile, icon circles, glow) */
  --c-coral-soft: #FFF5F3;  /* active rows, pills, dropzone */
  --c-coral-edge: #FCDCD4;  /* pill border */
  --c-pill-ink: #A8391F;    /* 6.0:1 on the tint */
  --c-ok: #1F7A4D;
  --c-ok-soft: #E4F4EA;
  --c-warn: #8A4B00;
  --c-warn-soft: #FDF0DC;
  --c-danger: #B42318;
  --c-danger-soft: #FDE7E4;

  /* ---- raw palette: night (warm dark) ---- */
  --c-dark: #1C1917;
  --c-dark-card: #292524;
  --c-dark-raise: #3A3431;
  --c-dark-line: #4A433E;
  --c-cream: #FFFDF9;       /* 17:1 on dark */
  --c-cream-2: #D6D0CB;     /* 11.5:1 */
  --c-coral-night: #FFA58E; /* buttons: dark text on it 9.2:1 */
  --c-coral-glow: #FFB4A2;  /* links on dark 10.3:1 */
  --c-ok-night: #8BE0B5;
  --c-warn-night: #FFC56B;
  --c-danger-night: #FFA89A;

  /* ---- type ---- */
  --font-body: "Outfit", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-display: "Outfit", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-legible: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --track-tight: -0.03em;
  --fs-hero: clamp(2.5rem, 1.6rem + 3.8vw, 4.75rem);  /* landing headlines, same in both modes */

  /* ---- space (4px base) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --gutter: 16px;

  /* ---- radius ---- */
  --r-1: 10px; --r-2: 16px; --r-3: 24px; --r-btn: 12px; --r-pill: 999px;

  /* ---- shadow ---- */
  --shadow-cta: 0 8px 20px rgba(255, 107, 74, .28);

  /* ---- motion ---- */
  --t-fast: 120ms;
  --t-med: 240ms;
  --t-slow: 420ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);

  /* ---- layout ---- */
  --w-page: 1160px;
  --w-read: 760px;
  --w-night: 520px;
  --w-side: 248px;
  --header-h: 76px;
  --tabbar-h: 68px;
}

/* ---------- Sober Mode (default) ---------- */
:root,
[data-mode="day"] {
  --bg: var(--c-canvas);
  --surface: var(--c-white);
  --surface-2: var(--c-card-2);
  --line: var(--c-line);
  --text: var(--c-ink);
  --text-2: var(--c-ink-2);
  --accent: var(--c-coral);
  --accent-ink: #FFFFFF;
  --accent-bright: var(--c-coral-bright);
  --accent-soft: var(--c-coral-soft);
  --accent-edge: var(--c-coral);
  --pill-ink: var(--c-pill-ink);
  --pill-edge: var(--c-coral-edge);
  --link: var(--c-coral);
  --ok: var(--c-ok);
  --ok-soft: var(--c-ok-soft);
  --warn: var(--c-warn);
  --warn-soft: var(--c-warn-soft);
  --danger: var(--c-danger);
  --danger-soft: var(--c-danger-soft);
  --focus: var(--c-coral);
  --scrim: rgba(28, 25, 23, .5);
  --btn-shadow: var(--shadow-cta);

  --heading: var(--font-display);
  --body: var(--font-body);
  --fs-sm: .875rem;       /* 14 */
  --fs-body: 1.0625rem;   /* 17 */
  --fs-lead: 1.25rem;     /* 20 */
  --fs-h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);   /* 28 → 44 */
  --fs-h1: clamp(2.125rem, 1.6rem + 2.2vw, 3.5rem);   /* 34 → 56 */
  --fs-display: clamp(2.5rem, 1.6rem + 3.8vw, 4.75rem);
  --lh: 1.6;

  --tap-min: 48px;
  --tap-primary: 56px;
  color-scheme: light;
}

/* ---------- Night Mode ----------
 * Same light look as Sober Mode, tuned for 2am: bigger type and thumb targets, and a deeper
 * coral and grey so every pair reaches AAA (7:1+). */
[data-mode="night"] {
  --bg: var(--c-canvas);
  --surface: var(--c-white);
  --surface-2: var(--c-card-2);
  --line: var(--c-line);
  --text: var(--c-ink);            /* 13.8:1 */
  --text-2: #4F4B48;               /* 8.5:1 */
  --accent: #9C3015;               /* white on it 7.4:1 */
  --accent-ink: #FFFFFF;
  --accent-bright: var(--c-coral-bright);
  --accent-soft: var(--c-coral-soft);
  --accent-edge: #9C3015;
  --pill-ink: #8A2F18;             /* 7.8:1 on the tint */
  --pill-edge: var(--c-coral-edge);
  --link: #8A2F18;
  --ok: #0F5A36;
  --ok-soft: var(--c-ok-soft);
  --warn: #7A4200;
  --warn-soft: var(--c-warn-soft);
  --danger: #9E1C12;
  --danger-soft: var(--c-danger-soft);
  --focus: #9C3015;
  --scrim: rgba(28, 25, 23, .55);
  --btn-shadow: var(--shadow-cta);

  --heading: var(--font-display);
  --body: var(--font-body);
  --fs-sm: 1rem;          /* 16 */
  --fs-body: 1.25rem;     /* 20 */
  --fs-lead: 1.5rem;      /* 24 */
  --fs-h2: 1.75rem;       /* 28 */
  --fs-h1: 2rem;          /* 32 */
  --fs-display: 4.5rem;   /* 72: countdown numerals */
  --lh: 1.5;

  --tap-min: 56px;
  --tap-primary: 64px;
  color-scheme: light;
}