/* =====================================================================
   ChemFlow BPS — Design Tokens  (v2 "Emerald Glass")
   Single source of truth for color, glass, elevation, radius & motion.
   Green-forward palette with a rare, premium gold pop.
   Legacy --bsp-* aliases map onto the new palette so older stylesheets
   stay consistent without being individually rewritten.
   ===================================================================== */
:root {
    color-scheme: light;

    --font-sans: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* ---- Brand: emerald (lead) ---- */
    --color-primary: #0ea371;
    --color-primary-strong: #047f57;
    --color-primary-dark: #045a3e;
    --color-primary-soft: #d6f4e6;
    --color-primary-tint: rgba(14, 163, 113, 0.10);
    --color-heading: #06372b;

    /* ---- Accent: gold (used sparingly) ---- */
    --color-accent: #e8b421;
    --color-accent-strong: #b9810a;
    --color-accent-soft: #fdf3d3;

    /* ---- Surfaces & neutrals (subtle green tint) ---- */
    --color-bg: #eef4f1;
    --color-bg-strong: #e4ede9;
    --color-surface: #ffffff;
    --color-surface-alt: #f3f8f5;
    --color-border: #dbe7e1;
    --color-border-strong: #c2d4cb;
    --color-text: #16241d;
    --color-muted: #5d6f66;

    /* ---- Status ---- */
    --color-success: #0ea371;
    --color-success-soft: #d6f4e6;
    --color-danger: #e11d48;
    --color-danger-soft: #ffe4e6;
    --color-warning: #e8b421;
    --color-warning-soft: #fdf3d3;
    --color-info: #0d9488;          /* teal — stays in the green family */
    --color-info-soft: #ccf2ee;

    /* ---- Glass (frosted) ---- */
    --glass-bg: rgba(255, 255, 255, 0.62);
    --glass-bg-strong: rgba(255, 255, 255, 0.80);
    --glass-bg-tint: rgba(214, 244, 230, 0.45);
    --glass-border: rgba(255, 255, 255, 0.70);
    --glass-blur: 18px;
    --glass-saturate: 140%;

    /* ---- Elevation (emerald-tinted, soft, layered) ---- */
    --shadow-xs: 0 1px 2px rgba(6, 55, 43, 0.06);
    --shadow-sm: 0 2px 8px rgba(6, 55, 43, 0.06), 0 1px 2px rgba(6, 55, 43, 0.04);
    --shadow-md: 0 10px 28px rgba(6, 55, 43, 0.10), 0 4px 10px rgba(6, 55, 43, 0.05);
    --shadow-lg: 0 24px 60px rgba(6, 55, 43, 0.16);
    --shadow-primary: 0 10px 26px rgba(14, 163, 113, 0.30);
    --shadow-gold: 0 10px 24px rgba(232, 180, 33, 0.28);
    --shadow-glass: 0 12px 40px rgba(6, 55, 43, 0.12);

    /* ---- Radius ---- */
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 999px;
    --radius: 16px;                 /* legacy alias */

    /* ---- Spacing ---- */
    --space-1: 0.5rem;
    --space-2: 0.75rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 2.5rem;

    /* ---- Motion ---- */
    --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-speed: 200ms;      /* legacy alias */

    /* ---- Gradients ---- */
    --gradient-primary: linear-gradient(135deg, #13b27e 0%, #047f57 100%);
    --gradient-primary-deep: linear-gradient(135deg, #057f57 0%, #045a3e 100%);
    --gradient-gold: linear-gradient(135deg, #f3c43d 0%, #d99a12 100%);
    --gradient-surface: linear-gradient(160deg, #ffffff 0%, #f3f8f5 100%);
    --gradient-heading: linear-gradient(135deg, #06372b 0%, #0ea371 100%);

    /* ---- Layout helpers referenced by other sheets ---- */
    --btn-height: 44px;
    --input-width: 160px;

    /* ---- Legacy --bsp-* aliases (map onto the new palette) ---- */
    --bsp-primary-color: var(--color-primary);
    --bsp-secondary-color: var(--color-primary-strong);
    --bsp-accent-color: var(--color-accent);
    --bsp-text-dark: var(--color-text);
    --bsp-surface-white: #ffffff;
    --bsp-background-light: var(--color-surface-alt);
    --bsp-warning: var(--color-accent);
    --bsp-info: var(--color-info);
    --color-bg-light: var(--color-bg);
}