/* ── Piclu Design Tokens ─────────────────────────────────────────────────
 *
 * Charter v0.3 §7 Visual direction is the source.
 * Posture: calm, warm, kitchen-counter — not marketplace, not tech-product.
 * "Restraint is the design value."
 *
 * Tokens only. No selectors that target real elements live here. If a value
 * appears more than once across components, it belongs here.
 *
 * Hierarchy of files:
 *   1. tokens.css      ← you are here
 *   2. components.css  primitives (button, input, card, pill, list-row, …)
 *   3. style.css       base, layout, page chrome
 */

:root {
    /* ── Palette ────────────────────────────────────────────────────────
     * Background → cream-warm, never stark. Text → warm charcoal, never pure
     * black. One accent (terracotta, kitchen-warm). Status colours muted,
     * never punchy. Avoid quick-commerce yellows/purples and tech blues —
     * both fight the posture. */

    /* All foreground/background pairs below have been audited to clear
     * WCAG AA 4.5 against their actual paired surfaces. Contrast values in
     * comments are computed (fg luminance, bg luminance) per WCAG 2.1. */

    --color-bg:            #FBF7F1;  /* warm cream */
    --color-surface:       #F4ECDF;  /* warmer card */
    --color-surface-alt:   #FFFFFF;  /* contrast surface (rare) */
    --color-fg:            #2A2520;  /* warm charcoal — not pure black */
    --color-fg-muted:      #6A5F52;  /* 5.50 on cream, 5.13 on surface — clears AA */
    --color-border:        #E4DACA;
    --color-border-strong: #CDBFA8;

    --color-accent:        #1F6B6B;  /* deep teal — primary action, focus.
                                        Pottery-glaze, peacock-glass-cabinet
                                        register; deliberately distinct from
                                        the Anthropic warm-coral neighbourhood.
                                        7.20 with cream — clears AAA. */
    --color-accent-soft:   #256E6E;  /* hover; 6.97 with cream — AAA preserved */
    --color-accent-quiet:  #DCE8E5;  /* tinted backgrounds (pale teal-grey) */

    /* Status — desaturated; never red-alarm or victory-green. Each fg is
     * tuned against its paired bg to clear AA 4.5; pills/badges read clearly
     * to anyone over 40 outdoors on an older Android. */
    --color-ok:     #3F6048;  /* 5.71 on --color-ok-bg */
    --color-ok-bg:  #E5EDE5;
    --color-warn:   #7E5A1F;  /* 5.42 on --color-warn-bg */
    --color-warn-bg:#F5EBD7;
    --color-err:    #A04438;
    --color-err-bg: #F2DDD9;

    /* ── Type ───────────────────────────────────────────────────────────
     * Humanist sans-serif. Noto Sans family for Latin + future Indian-script
     * parity (charter §7 calls multi-script support non-negotiable).
     *
     * Today: stack-only. If 'Noto Sans' is system-installed (Android default,
     * available on Linux distros, macOS Catalina+, recent Windows) it renders
     * natively. Otherwise the humanist fallbacks step in. Self-hosted woff2
     * for guaranteed rendering across all OSes is a follow-up — see
     * deferred_provisioning_alpha.md adjacent design-system items. */

    --font-sans: 'Noto Sans', 'IBM Plex Sans', 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* Type scale — clear hierarchy steps, not a muddy ladder. Steps are
     * deliberately uneven: small text differences compress (sm/base) for
     * dense reading; heading jumps stretch (md/lg/xl) so the page silhouette
     * carries the hierarchy at a glance. Charter §7: "type-led, breathes".
     *
     * xs   — fineprint only (timestamps, badges, legal)
     * sm   — labels, muted secondary text
     * base — body, inputs, buttons
     * md   — section subheadings (h3-class)
     * lg   — page title (h2-class)
     * xl   — login wordmark / hero */
    --text-xs:   12px;
    --text-sm:   14px;
    --text-base: 16px;
    --text-md:   20px;
    --text-lg:   28px;
    --text-xl:   36px;

    --leading-tight: 1.3;
    --leading-body:  1.55;

    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;

    /* ── Space scale (4-pt grid) ──────────────────────────────────────
     *
     * Rhythm rule (every component composes against this, not against
     * gut feel — that's how breathing-room stays consistent across pages):
     *   --space-6  section-stack    (vertical stack between sections)
     *   --space-5  intra-section    (card padding, form gap to siblings)
     *   --space-4  related-block    (label-to-input, header-to-body)
     *   --space-3  inline-row       (chip gaps, button-to-button)
     *   --space-2  tight            (label-to-input within a single row)
     *   --space-1  hairline         (icon-to-text adjacency)
     */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  24px;
    --space-6:  32px;
    --space-7:  48px;
    --space-8:  64px;

    /* ── Radius ─────────────────────────────────────────────────────── */
    --radius-sm:   6px;   /* inputs, small buttons */
    --radius-md:   10px;  /* primary buttons, chips */
    --radius-lg:   14px;  /* cards */
    --radius-pill: 999px;

    /* ── Elevation (used sparingly per charter restraint) ───────────── */
    --shadow-card:  0 1px 2px rgba(42, 37, 32, 0.04),
                    0 4px 12px rgba(42, 37, 32, 0.05);
    --shadow-focus: 0 0 0 3px rgba(31, 107, 107, 0.25);

    /* ── Motion ─────────────────────────────────────────────────────── */
    --motion-quick: 120ms ease-out;
    --motion-base:  180ms ease-out;
    --motion-calm:  240ms ease-out;

    /* ── Layout ─────────────────────────────────────────────────────── */
    --content-width: 720px;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-quick: 0ms;
        --motion-base:  0ms;
        --motion-calm:  0ms;
    }
}