/*
 * Relish design tokens — the --relish-* CSS custom property contract.
 * Defaults seeded from designs/imports/claude-design-2026-08-20/docs/design-tokens.md
 * (swap values when official brand assets arrive; keep the names).
 *
 * Per-tenant branding overrides a curated subset of these at :root via an inline
 * <style> emitted server-side (see ThemeStyles.razor). Components reference only
 * these variables in their isolated .razor.css — never hard-coded values.
 */
:root {
    /* Color — neutrals */
    --relish-cream: #F7F4ED;      /* app background */
    --relish-surface: #FFFFFF;    /* primary surfaces */
    --relish-card: #FBF9F4;       /* raised cards */
    --relish-border: #E7E1D6;     /* hairlines */

    /* Color — text */
    --relish-ink: #26231E;        /* primary text */
    --relish-ink-soft: #6B6459;   /* secondary text */
    --relish-ink-faint: #9A9284;  /* tertiary/meta */

    /* Color — brand */
    --relish-herb: #3D5A40;       /* primary brand green */
    --relish-herb-deep: #2C4230;  /* deep green: headers/hovers */
    --relish-herb-light: #7C9070; /* muted green */
    --relish-herb-wash: #EEF1E7;  /* green tint fill */
    --relish-coral: #CD5334;      /* restrained accent */
    --relish-coral-wash: #F7E7DF; /* coral tint */
    --relish-wood: #A9704B;       /* earth/wood neutral */
    --relish-gold: #C9862E;       /* warm accent */
    --relish-gold-wash: #F5ECD9;  /* gold tint (intolerance chips) */
    --relish-info-wash: #E1EAF1;  /* info tint (order/session tags) */

    /* Color — semantic (color never carries safety meaning alone; pair icon + text) */
    --relish-success: #4E7A4A;
    --relish-warning: #C9862E;
    --relish-danger: #B23A2E;     /* also allergen/safety */
    --relish-info: #3E6B8A;
    --relish-on-brand: #FFFFFF;   /* text on brand fills */

    /* Typography */
    --relish-font-display: "Newsreader", Georgia, "Times New Roman", serif;
    --relish-font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --relish-fs-12: 12px; --relish-fs-13: 13px; --relish-fs-14: 14px; --relish-fs-15: 15px;
    --relish-fs-16: 16px; --relish-fs-18: 18px; --relish-fs-22: 22px; --relish-fs-28: 28px;
    --relish-fs-36: 36px; --relish-fs-48: 48px;

    /* Spacing scale */
    --relish-space-1: 4px; --relish-space-2: 8px; --relish-space-3: 12px;
    --relish-space-4: 16px; --relish-space-5: 20px; --relish-space-6: 24px;
    --relish-space-8: 32px; --relish-space-10: 40px; --relish-space-14: 56px; --relish-space-18: 72px;

    /* Shape */
    --relish-radius-control: 6px;
    --relish-radius-card: 12px;
    --relish-radius-sheet: 20px;
    --relish-radius-pill: 999px;

    /* Elevation — subtle only */
    --relish-elevation-1: 0 1px 2px rgba(38, 35, 30, .05), 0 10px 30px rgba(38, 35, 30, .06);

    /* Touch */
    --relish-touch-min: 44px;
}