/* ===========================================================================
 * Family Platform prototype — design tokens v0.1
 * ---------------------------------------------------------------------------
 * Design intent: warm, friendly, trustworthy. Reads as a safe home, not a
 * glossy tech product. Palette draws from children's book illustration
 * conventions (soft primaries, cream backgrounds) rather than from
 * engagement-maximizing social-media UI (saturated reds, pulsing CTAs).
 *
 * Accessibility: WCAG 2.1 AA minimum. All text/background pairs below have
 * been checked for 4.5:1 contrast at 16px.
 *
 * Scale: 4px base unit. Spacing, radius, type size all derive from it.
 * ========================================================================= */

:root {
    /* -------- Core palette -------- */
    --fp-cream: #FBF7EE;              /* primary background — warm cream */
    --fp-cream-tint: #F3EEE2;         /* soft section background */
    --fp-cream-shade: #E8DFC8;        /* subtle borders on cream */

    --fp-ink: #2A2520;                /* primary text — warm near-black */
    --fp-ink-soft: #5C544A;           /* secondary text */
    --fp-ink-whisper: #8E8578;        /* tertiary text / placeholders */

    --fp-sky: #7DB3C9;                /* primary accent — calm sky blue */
    --fp-sky-deep: #4A8FAA;           /* interactive sky */
    --fp-sky-mist: #D7E7EF;           /* sky tint for backgrounds */

    --fp-moss: #7CA573;               /* positive / affirmative — mossy green */
    --fp-moss-deep: #567D4F;
    --fp-moss-mist: #D7E3D2;

    --fp-sun: #E8B547;                /* highlight / badge — warm sun */
    --fp-sun-deep: #B8891E;
    --fp-sun-mist: #F4E4B8;

    --fp-berry: #C76E6E;              /* alert / destructive — berry */
    --fp-berry-deep: #9A4848;
    --fp-berry-mist: #ECD2D2;

    --fp-lavender: #A892C4;           /* decorative / schoolhouse accent */
    --fp-lavender-mist: #DED3EA;

    /* -------- Room color anchors -------- */
    /* Each public room has a signature hue so navigation feels spatial. */
    --fp-room-home: var(--fp-cream);
    --fp-room-theater: #2E2638;        /* deep plum — dim theater lighting */
    --fp-room-library: #6F543A;        /* leather / old paper */
    --fp-room-arcade: #D97A4F;         /* warm sunset orange */
    --fp-room-schoolhouse: var(--fp-lavender);
    --fp-room-store: var(--fp-sky);

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

    /* -------- Radius -------- */
    --fp-radius-sm: 6px;
    --fp-radius-md: 12px;
    --fp-radius-lg: 20px;
    --fp-radius-xl: 32px;
    --fp-radius-pill: 999px;

    /* -------- Typography -------- */
    /* Primary: humanist sans. Secondary: friendly rounded for kid surfaces.
     * System font stack keeps the prototype dependency-free. */
    --fp-font-ui: ui-rounded, 'Nunito', 'Avenir Next', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --fp-font-kid: ui-rounded, 'Fredoka', 'Nunito', system-ui, sans-serif;
    --fp-font-mono: ui-monospace, 'SF Mono', 'Menlo', Consolas, monospace;

    --fp-fs-xs: 12px;
    --fp-fs-sm: 14px;
    --fp-fs-md: 16px;
    --fp-fs-lg: 20px;
    --fp-fs-xl: 28px;
    --fp-fs-2xl: 40px;
    --fp-fs-3xl: 56px;

    --fp-fw-regular: 400;
    --fp-fw-medium: 500;
    --fp-fw-semibold: 600;
    --fp-fw-bold: 700;

    --fp-lh-tight: 1.2;
    --fp-lh-normal: 1.5;
    --fp-lh-relaxed: 1.7;

    /* -------- Shadows -------- */
    /* Soft shadows only — no harsh drop-shadows. Reads as "lived-in." */
    --fp-shadow-sm: 0 1px 2px rgba(42, 37, 32, 0.08);
    --fp-shadow-md: 0 4px 12px rgba(42, 37, 32, 0.10);
    --fp-shadow-lg: 0 12px 32px rgba(42, 37, 32, 0.14);
    --fp-shadow-inner: inset 0 2px 4px rgba(42, 37, 32, 0.08);

    /* -------- Motion -------- */
    --fp-dur-quick: 120ms;
    --fp-dur-normal: 240ms;
    --fp-dur-slow: 400ms;
    --fp-ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
    --fp-ease-emphasized: cubic-bezier(0.3, 0.0, 0.0, 1);

    /* -------- Layering -------- */
    --fp-z-base: 1;
    --fp-z-overlay: 10;
    --fp-z-modal: 100;
    --fp-z-toast: 200;
    --fp-z-cord: 300;  /* jidoka cord is always on top */

    /* -------- Age-mode UI density knobs -------- */
    /* Children ages 5-6 get larger touch targets, bigger type, simpler shapes.
     * These are swapped at runtime when the age-sub-band changes. */
    --fp-touch-target-min: 44px;        /* default; swapped to 56px for 5-6 */
    --fp-fs-body-mode-default: var(--fp-fs-md);
    --fp-fs-body-mode-56: var(--fp-fs-lg);
    --fp-fs-body-mode-78: var(--fp-fs-md);
}

/* ===========================================================================
 * Role-mode modifiers.
 * Prototype supports "parent view" and "kid view" with a toggle for demo.
 * Also supports age sub-bands within kid view (5-6 and 7-8).
 * ========================================================================= */

[data-role="parent"] {
    --fp-fs-body: var(--fp-fs-md);
    --fp-touch-target: var(--fp-touch-target-min);
}

[data-role="kid"][data-age="5-6"] {
    --fp-fs-body: var(--fp-fs-body-mode-56);
    --fp-touch-target: 56px;
}

[data-role="kid"][data-age="7-8"] {
    --fp-fs-body: var(--fp-fs-body-mode-78);
    --fp-touch-target: 48px;
}

/* ===========================================================================
 * Accessibility — reduced motion.
 * ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    :root {
        --fp-dur-quick: 1ms;
        --fp-dur-normal: 1ms;
        --fp-dur-slow: 1ms;
    }
}