/* =====================================================================
   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);
}

/* =====================================================================
   Dark theme — <html data-theme="dark"> (set from the user's setting,
   see templates/base.html). Bootstrap follows via data-bs-theme="dark".
   Only colors change; the scale/radius/motion tokens above are shared.
   Green used as a *background* (buttons, table heads) stays close to the
   light theme so white text on it keeps its contrast; green used as
   *text* (headings, numbers) is lifted so it reads on dark surfaces.
   ===================================================================== */
:root[data-theme="dark"] {
    color-scheme: dark;

    --color-primary: #12b07a;
    --color-primary-strong: #0a9566;
    --color-primary-dark: #5fd9a8;
    --color-primary-soft: #12352a;
    --color-primary-tint: rgba(18, 176, 122, 0.15);
    --color-heading: #e6f4ee;

    --color-accent: #e8b421;
    --color-accent-strong: #e0a82e;
    --color-accent-soft: #3a2f12;

    --color-bg: #0c1613;
    --color-bg-strong: #101d19;
    --color-surface: #14221d;
    --color-surface-alt: #192a24;
    --color-border: #253a31;
    --color-border-strong: #335043;
    --color-text: #dbe8e2;
    --color-muted: #8fa59b;

    --color-success: #12b07a;
    --color-success-soft: #12352a;
    --color-danger: #fb7185;
    --color-danger-soft: #3d1620;
    --color-warning: #e8b421;
    --color-warning-soft: #3a2f12;
    --color-info: #2dd4bf;
    --color-info-soft: #0f3330;

    --glass-bg: rgba(20, 34, 29, 0.66);
    --glass-bg-strong: rgba(20, 34, 29, 0.88);
    --glass-bg-tint: rgba(18, 53, 42, 0.5);
    --glass-border: rgba(255, 255, 255, 0.06);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.45), 0 4px 10px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
    --shadow-primary: 0 10px 26px rgba(18, 176, 122, 0.25);
    --shadow-gold: 0 10px 24px rgba(232, 180, 33, 0.2);
    --shadow-glass: 0 12px 40px rgba(0, 0, 0, 0.45);

    --gradient-surface: linear-gradient(160deg, #14221d 0%, #192a24 100%);
    --gradient-heading: linear-gradient(135deg, #e6f4ee 0%, #34d399 100%);

    --bsp-surface-white: var(--color-surface);

    /* Bootstrap's own surfaces follow the app palette */
    --bs-body-bg: var(--color-bg);
    --bs-body-color: var(--color-text);
    --bs-border-color: var(--color-border);
    --bs-secondary-bg: var(--color-surface-alt);
    --bs-tertiary-bg: var(--color-surface-alt);
    --bs-emphasis-color: var(--color-heading);
    --bs-secondary-color: var(--color-muted);
}