/*
 * Shared design tokens — single :root source for shell, content, and Shopify app pages.
 */

:root {
    --ink: #0b1120;
    --ink-light: #1e293b;
    --ink-lighter: #334155;
    --green: #008060;
    --green-hover: #006e52;
    --emerald: #10b981;
    --emerald-soft: #d1fae5;
    --amber: #f59e0b;
    --amber-soft: #fef3c7;
    --sky: #0ea5e9;
    --sky-soft: #e0f2fe;
    --red: #ef4444;
    --red-soft: #fef2f2;
    --text: #0f172a;
    --body: #475569;
    --muted: #94a3b8;
    --faint: #cbd5e1;
    --surface: #ffffff;
    --surface-alt: #f8fafc;
    --surface-raised: #f1f5f9;
    --border: rgba(15, 23, 42, 0.08);
    --border-strong: rgba(15, 23, 42, 0.15);
    --r: 12px;
    --r-lg: 16px;
    --r-xl: 24px;
    --r-pill: 9999px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.06);
    --shadow-glow: 0 0 40px rgba(16, 185, 129, 0.12);
    --container: 73.75rem;
    --nav-h: 4rem;
    --subnav-h: 3.25rem;

    /* Transitional aliases (legacy lfs-* pages) */
    --lfs-teal: var(--emerald);
    --lfs-teal-hover: #059669;
    --lfs-teal-soft: var(--emerald-soft);
    --lfs-text: var(--text);
    --lfs-text-muted: var(--body);
    --lfs-surface: var(--surface);
    --lfs-bg: var(--surface-alt);
    --lfs-radius: var(--r);
    --lfs-radius-pill: var(--r-pill);
    --lfs-shadow-sm: var(--shadow-sm);
    --lfs-shadow-md: var(--shadow-md);
    --shopify-green: var(--green);
    --shopify-green-hover: var(--green-hover);
}