/* ─────────────────────────────────────────────────────────────────────────
 * Sundown — Shared Experiences design tokens
 * Direction 01 · Terracotta dusk
 *
 * Drop this into any project as `tokens.css` and import it once at the root.
 * All tokens are CSS custom properties so they can be re-themed by scoping
 * (e.g. attach a different :root block under [data-theme="…"]).
 *
 * Color values are OKLCH (modern, perceptually uniform). Hex fallbacks are
 * shown in the comment beside each one for tooling that doesn’t parse OKLCH.
 * ───────────────────────────────────────────────────────────────────────── */

:root {
    /* — Neutrals ——————————————————————————————————————————————— */
    --color-paper: oklch(0.975 0.01 75); /* #fbf6f0 */
    --color-paper-alt: oklch(0.945 0.018 70); /* #f5ebe0 */
    --color-line: oklch(0.885 0.018 65); /* #e2d7cd */
    --color-ink-subtle: oklch(0.64 0.025 55); /* #99897e */
    --color-ink-muted: oklch(0.43 0.03 45); /* #5e4b42 */
    --color-ink: oklch(0.22 0.035 40); /* #28150e */

    /* — Brand ————————————————————————————————————————————————— */
    --color-primary: oklch(0.595 0.135 38); /* #c15e3f  terracotta */
    --color-primary-fg: oklch(0.985 0.008 70); /* #fef9f4 */
    --color-accent: oklch(0.78 0.105 70); /* #e3ab6a  warm peach */

    /* — Status ———————————————————————————————————————————————— */
    --color-success: oklch(0.62 0.095 145); /* #609562 */
    --color-danger: oklch(0.56 0.15 25); /* #bc4945 */

    /* — Lifecycle stages ————————————————————————————————————————
   * Each stage carries three roles:
   *   --stage-{name}-bg   quiet tint backgrounds (badges, cards)
   *   --stage-{name}-fg   readable foreground over its own -bg
   *   --stage-{name}-dot  solid swatch for indicators and progress fills
   * — */
    --stage-save-bg: oklch(0.93 0.035 85); /* #f3e7ce */
    --stage-save-fg: oklch(0.32 0.07 85); /* #432f00 */
    --stage-save-dot: oklch(0.66 0.13 85); /* #b68b16 */

    --stage-discuss-bg: oklch(0.93 0.035 60); /* #fae3d1 */
    --stage-discuss-fg: oklch(0.32 0.07 60); /* #4c2905 */
    --stage-discuss-dot: oklch(0.66 0.13 60); /* #cb7d34 */

    --stage-budget-bg: oklch(0.93 0.035 40); /* #fee1d7 */
    --stage-budget-fg: oklch(0.32 0.07 40); /* #502515 */
    --stage-budget-dot: oklch(0.66 0.13 40); /* #d47452 */

    --stage-schedule-bg: oklch(0.93 0.035 22); /* #ffdfdd */
    --stage-schedule-fg: oklch(0.32 0.07 22); /* #512222 */
    --stage-schedule-dot: oklch(0.66 0.13 22); /* #d66f6e */

    --stage-book-bg: oklch(0.93 0.035 8); /* #fedfe3 */
    --stage-book-fg: oklch(0.32 0.07 8); /* #50222c */
    --stage-book-dot: oklch(0.66 0.13 8); /* #d46d83 */

    --stage-prepare-bg: oklch(0.93 0.035 355); /* #fcdfe9 */
    --stage-prepare-fg: oklch(0.32 0.07 355); /* #4e2235 */
    --stage-prepare-dot: oklch(0.66 0.13 355); /* #cf6e96 */

    --stage-capture-bg: oklch(0.93 0.035 335); /* #f8e0f1 */
    --stage-capture-fg: oklch(0.32 0.07 335); /* #482441 */
    --stage-capture-dot: oklch(0.66 0.13 335); /* #c272b2 */

    /* — Type ——————————————————————————————————————————————————
   * One humanist sans: DM Sans, 400 / 500 / 600 / 700.
   * Load via Google Fonts or self-host; sizes are in px so the scale
   * survives in any root-font-size context. */
    --font-sans:
        "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --text-display-size: 56px;
    --text-display-line: 60px;
    --text-display-weight: 600;
    --text-h1-size: 36px;
    --text-h1-line: 42px;
    --text-h1-weight: 600;
    --text-h2-size: 24px;
    --text-h2-line: 30px;
    --text-h2-weight: 600;
    --text-h3-size: 18px;
    --text-h3-line: 24px;
    --text-h3-weight: 600;
    --text-body-size: 16px;
    --text-body-line: 25px;
    --text-body-weight: 400;
    --text-body-sm-size: 14px;
    --text-body-sm-line: 21px;
    --text-body-sm-weight: 400;
    --text-caption-size: 12px;
    --text-caption-line: 17px;
    --text-caption-weight: 500;

    /* — Spacing scale ————————————————————————————————————————— */
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-48: 48px;
    --space-64: 64px;

    /* — Radii ————————————————————————————————————————————————— */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* — Elevation ———————————————————————————————————————————— */
    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.04);
    --shadow-md:
        0 1px 0 oklch(0 0 0 / 0.02), 0 8px 24px -16px oklch(0 0 0 / 0.15);
    --shadow-lg:
        0 4px 12px -4px oklch(0 0 0 / 0.1),
        0 16px 40px -12px oklch(0 0 0 / 0.18);
    --ring-focus: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.18);

    /* — Motion ———————————————————————————————————————————————— */
    --duration-fast: 120ms;
    --duration-base: 180ms;
    --duration-slow: 320ms;
    --easing-out: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Base — opt-in by adding `.sundown` to <html> or <body>, or by importing
 * this file at the top of your root stylesheet. Nothing here is required;
 * the tokens above are the contract. */
.sundown,
[data-theme="sundown"] {
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--text-body-size);
    line-height: calc(var(--text-body-line) / var(--text-body-size));
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}