/* Rapport – Mind & Self · fonts + design tokens (load before site.css)
   Day/night tokens mirror the app's design-system palette (day = check-in, night = reflection).
   Theme: html[data-theme="day"|"night"] (set by theme.js); without JS the
   system preference decides via prefers-color-scheme. */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-medium-italic.woff2") format("woff2");
}

/* ---------- Tokens: day (default) ---------- */
:root {
  color-scheme: light;
  --bg-1: #ede6da;
  --bg-2: #f4f0e8;
  --bg-3: #f7f5f0;
  --glow-1: rgba(138, 154, 134, 0.55);
  --glow-2: rgba(200, 125, 111, 0.28);
  --text: #2f2c33;
  --text-2: rgba(47, 44, 51, 0.76);
  --line: rgba(90, 74, 82, 0.16);
  --sheet-1: #f1ece3;
  --sheet-2: #ede8de;
  --sheet-border: rgba(255, 255, 255, 0.9);
  --sheet-handle: rgba(47, 44, 51, 0.18);
  --card-1: rgba(255, 255, 255, 0.82);
  --card-2: rgba(255, 255, 255, 0.55);
  --card-tint: rgba(200, 125, 111, 0.1);
  --card-border: rgba(255, 255, 255, 0.9);
  --card-shadow: 0 10px 28px rgba(120, 90, 60, 0.08);
  --row: rgba(47, 44, 51, 0.05);
  --chip-bg: rgba(255, 255, 255, 0.6);
  --chip-bg-hover: rgba(255, 255, 255, 0.88);
  --chip-border: rgba(90, 74, 82, 0.12);
  --chip-text: rgba(47, 44, 51, 0.86);
  --tag-border: rgba(90, 74, 82, 0.2);
  --dur-bg: rgba(138, 154, 134, 0.18);
  --dur-border: rgba(110, 128, 106, 0.38);
  --dur-text: #4a5947;
  --feature: linear-gradient(160deg, #aebba9 0%, #98a894 45%, #8a9a86 75%, #a2ad92 100%);
  --feature-border: rgba(255, 255, 255, 0.6);
  --feature-text: #1f2620;
  --feature-text-2: #2c352c;
  --feature-glow: rgba(247, 232, 200, 0.6);
  --bar-bg: rgba(255, 255, 255, 0.62);
  --bar-border: rgba(255, 255, 255, 0.9);
  --active-bg: #2f2c33;
  --active-fg: #f7f5f0;
  --elevated: 0 14px 40px rgba(120, 90, 60, 0.14);
  --phone-shadow: 0 30px 70px rgba(80, 60, 40, 0.22);
  --link: #8f4e42;
  --focus: #8f4e42;
}

/* ---------- Tokens: night ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]) {
    color-scheme: dark;
    --bg-1: #161a25;
    --bg-2: #0e1116;
    --bg-3: #0c0f13;
    --glow-1: rgba(110, 104, 180, 0.85);
    --glow-2: rgba(240, 214, 160, 0.5);
    --text: #ece8e1;
    --text-2: rgba(236, 232, 225, 0.7);
    --line: rgba(255, 255, 255, 0.1);
    --sheet-1: #181c25;
    --sheet-2: #12151b;
    --sheet-border: rgba(255, 255, 255, 0.08);
    --sheet-handle: rgba(236, 232, 225, 0.22);
    --card-1: rgba(255, 255, 255, 0.08);
    --card-2: rgba(255, 255, 255, 0.035);
    --card-tint: rgba(200, 125, 111, 0.08);
    --card-border: rgba(255, 255, 255, 0.08);
    --card-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
    --row: rgba(255, 255, 255, 0.06);
    --chip-bg: rgba(255, 255, 255, 0.07);
    --chip-bg-hover: rgba(255, 255, 255, 0.12);
    --chip-border: rgba(255, 255, 255, 0.09);
    --chip-text: rgba(236, 232, 225, 0.86);
    --tag-border: rgba(255, 255, 255, 0.14);
    --dur-bg: rgba(138, 154, 134, 0.16);
    --dur-border: rgba(138, 154, 134, 0.42);
    --dur-text: #bfccba;
    --feature: linear-gradient(160deg, #5f59a0 0%, #4f4a8a 40%, #3a366c 75%, #4f4573 100%);
    --feature-border: rgba(240, 218, 170, 0.32);
    --feature-text: #f6f2ea;
    --feature-text-2: #ebe5da;
    --feature-glow: rgba(240, 214, 160, 0.5);
    --bar-bg: rgba(32, 36, 48, 0.62);
    --bar-border: rgba(255, 255, 255, 0.09);
    --active-bg: #efeae2;
    --active-fg: #171a20;
    --elevated: 0 14px 40px rgba(0, 0, 0, 0.4);
    --phone-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    --link: #e3a598;
    --focus: #f0d6a0;
  }
}

:root[data-theme="night"] {
  color-scheme: dark;
  --bg-1: #161a25;
  --bg-2: #0e1116;
  --bg-3: #0c0f13;
  --glow-1: rgba(110, 104, 180, 0.85);
  --glow-2: rgba(240, 214, 160, 0.5);
  --text: #ece8e1;
  --text-2: rgba(236, 232, 225, 0.7);
  --line: rgba(255, 255, 255, 0.1);
  --sheet-1: #181c25;
  --sheet-2: #12151b;
  --sheet-border: rgba(255, 255, 255, 0.08);
  --sheet-handle: rgba(236, 232, 225, 0.22);
  --card-1: rgba(255, 255, 255, 0.08);
  --card-2: rgba(255, 255, 255, 0.035);
  --card-tint: rgba(200, 125, 111, 0.08);
  --card-border: rgba(255, 255, 255, 0.08);
  --card-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
  --row: rgba(255, 255, 255, 0.06);
  --chip-bg: rgba(255, 255, 255, 0.07);
  --chip-bg-hover: rgba(255, 255, 255, 0.12);
  --chip-border: rgba(255, 255, 255, 0.09);
  --chip-text: rgba(236, 232, 225, 0.86);
  --tag-border: rgba(255, 255, 255, 0.14);
  --dur-bg: rgba(138, 154, 134, 0.16);
  --dur-border: rgba(138, 154, 134, 0.42);
  --dur-text: #bfccba;
  --feature: linear-gradient(160deg, #5f59a0 0%, #4f4a8a 40%, #3a366c 75%, #4f4573 100%);
  --feature-border: rgba(240, 218, 170, 0.32);
  --feature-text: #f6f2ea;
  --feature-text-2: #ebe5da;
  --feature-glow: rgba(240, 214, 160, 0.5);
  --bar-bg: rgba(32, 36, 48, 0.62);
  --bar-border: rgba(255, 255, 255, 0.09);
  --active-bg: #efeae2;
  --active-fg: #171a20;
  --elevated: 0 14px 40px rgba(0, 0, 0, 0.4);
  --phone-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  --link: #e3a598;
  --focus: #f0d6a0;
}

/* ---------- Shared, theme-independent tokens ---------- */
:root {
  --accent: linear-gradient(145deg, #d48e80 0%, #c87d6f 60%, #be7467 100%);
  --accent-solid: #c87d6f;
  --on-accent: #22161a;
  --accent-shadow: 0 6px 18px rgba(200, 125, 111, 0.3);
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --step-hero: clamp(2.9rem, 1.7rem + 5.2vw, 5.6rem);
  --step-h2: clamp(2.3rem, 1.6rem + 2.8vw, 3.75rem);
  --step-h3: clamp(1.55rem, 1.3rem + 0.8vw, 1.95rem);
  --step-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --gutter: 16px;
  --max: 1160px;
  --radius-sheet: 34px;
  --radius-card: 24px;
  --radius-pill: 999px;
  --space-section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-theme: 700ms;
}

@media (min-width: 720px) {
  :root { --gutter: 28px; }
}