/* PROVENANCE: ported from docs/design-tokens.md and the iOS app's
 * Theme.swift (2026-07-30) — NOT a byte-copy of web/landing/css/tokens.css,
 * which is dark-only and indigo-only. web/ subdirectories are independent
 * Cloudflare Pages deploys and cannot share files at serve time, so this is
 * a deliberate, from-source port rather than a copy. Per the plan amendment
 * approved via the review mockup (mockup-light-mint.html), the analyzer
 * ships the LIGHT scheme with the MINT accent as its served default — not
 * the landing page's dark indigo. A Mint dark alternate is included below
 * for prefers-color-scheme completeness; it is not the shipped default.
 * Sources of truth are docs/design-tokens.md and Theme.swift; if either
 * changes, re-port this file and keep this banner. */

/* ============================================================================
 * Nova Baby Rhythm — design tokens
 * ----------------------------------------------------------------------------
 * Light scheme, Mint accent: the analyzer's served default (see PROVENANCE
 * above). This file defines CUSTOM PROPERTIES ONLY. No component/selector
 * styles.
 *
 *   - :root                              light + Mint (served default),
 *                                         static hex fallback
 *   - @supports (color-mix ...)           re-tints the light surfaces from
 *                                         the accent, porting Theme.mixHex
 *   - @media (prefers-color-scheme: dark) Mint dark alternate (same
 *                                         derivation, dark neutrals)
 *
 * Activity colours are SEMANTIC. They never follow the accent — a feed is
 * always teal, a diaper always amber, regardless of scheme. Feeds are teal
 * and sleep marks are mint; because the two hues sit close together,
 * anything that renders both (charts.js) must also carry a non-color
 * distinction (shape/lightness/label) per the plan amendment.
 * ========================================================================== */

:root {
    color-scheme: light;

    /* Surfaces (light, Mint) — static fallback for browsers without color-mix */
    --background: #EBF0F0;
    --card:       #F6FAF9;
    --elevated:   #EFF6F4;
    --sheet:      #F0F5F5;

    /* Text */
    --text-1: #1C1F2A;
    --text-2: #5A6072;
    --text-3: #9AA0B0;

    /* Brand (Mint, light) */
    --accent:        #1E8B69;
    --accent-bright: #167253;
    --accent-soft:   #7ED0B4;
    --on-accent:     #FFFFFF;

    /* Activity (semantic — NEVER follow accent) */
    --feed:   #1F8E76;
    --diaper: #96700F;
    --alert:  #C24343;
    --tummy:  #A8497F;
    --bath:   #2A7FAE;
    --growth: #4F8F1F;

    /* Lines */
    --hairline:    rgba(10, 12, 16, 0.10);
    --subtle-fill: rgba(10, 12, 16, 0.05);

    /* Type & shape (scheme/accent independent) */
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    --r-card:    14px;
    --r-card-lg: 16px;
    --r-sheet:   20px;
    --r-pill:    999px;
}

/* ── Accent-tinted surfaces (ports Theme.mixHex, light neutrals) ─────────────
 * The app derives each surface by mixing the accent into a near-white base at
 * a fixed fraction (docs/design-tokens.md "Surfaces" table, light column).
 * With the Mint accent this resolves close to the static hexes above; the
 * static hexes are the fallback for browsers without color-mix support. */
@supports (background: color-mix(in srgb, red, blue)) {
    :root {
        --background: color-mix(in srgb, var(--accent) 5%,  #F6F6F8);
        --card:       color-mix(in srgb, var(--accent) 4%,  #FFFFFF);
        --elevated:   color-mix(in srgb, var(--accent) 7%,  #FFFFFF);
        --sheet:      color-mix(in srgb, var(--accent) 5%,  #FBFBFD);
    }
}

/* ── Mint dark alternate ──────────────────────────────────────────────────
 * Structural two-scheme support for prefers-color-scheme, ported from
 * docs/design-tokens.md's dark column with the Mint accent. The analyzer's
 * served default is the light scheme above; this block only activates for
 * visitors whose OS is set to dark. */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --background: #09100D;
        --card:       #111B18;
        --elevated:   #162125;
        --sheet:      #131D1A;

        --text-1: #E9ECF2;
        --text-2: #8C93A6;
        --text-3: #565D70;

        --accent:        #7ED0B4;
        --accent-bright: #9BDEC6;
        --accent-soft:   #9BDEC6;
        --on-accent:     #0A0C10;

        --feed:   #5BC8AF;
        --diaper: #D9A853;
        --alert:  #E07A7A;
        --tummy:  #C87BB0;
        --bath:   #6DB3D9;
        --growth: #9FD96B;

        --hairline:    rgba(255, 255, 255, 0.08);
        --subtle-fill: rgba(255, 255, 255, 0.06);
    }

    @supports (background: color-mix(in srgb, red, blue)) {
        :root {
            --background: color-mix(in srgb, var(--accent) 6%,  #020402);
            --card:       color-mix(in srgb, var(--accent) 8%,  #070B0A);
            --elevated:   color-mix(in srgb, var(--accent) 10%, #0A0D15);
            --sheet:      color-mix(in srgb, var(--accent) 8%,  #0A0D0D);
        }
    }
}