/*
 * ============================================================
 *  Freeloxa — Centralized Color Palette
 *  All color values used across the application are defined
 *  here as CSS custom properties.  Import this file first in
 *  every entry-point stylesheet (app.css).
 * ============================================================
 */

:root {
    /* ── Brand / Primary (Freeloxa Green) ──────────────────── */
    --color-primary: #007a33;
    --color-primary-dark: #005a27;
    --color-primary-darker: #1f4f3f;
    --color-primary-hover: #1f4f3fcf;
    --color-primary-hover-dark: #1f4f3fde;
    --color-primary-mid: #2c6b55;
    --color-primary-light: #1f6f4a;
    --color-primary-bg: #007a3315;
    --color-primary-bg-hover: #007a3325;
    --color-primary-bg-active: #007a3330;
    --color-primary-subtle: #007a3308; /* rgba(0,122,51,0.08) */
    --color-primary-tint: #e6f4ec;
    --color-primary-tint-dark: #d0eadb;
    --color-primary-tint-light: #eef5f1;
    --color-primary-surface: #f4f6f5;
    /* ── Blue / Action ─────────────────────────────────────── */
    --color-blue: #0078d4;
    --color-blue-dark: #005fa3;
    --color-blue-link: #007bff;
    --color-blue-bright: #0094ff;
    --color-blue-focus: #258cfb;
    --color-blue-tint: #e6f0fa;
    --color-blue-surface: #ebf5fb;
    --color-blue-surface-light: #eff6ff;
    --color-blue-surface-lighter: #eef6fb;
    --color-blue-surface-faint: #f5f9ff;
    --color-blue-info: #2471a3;
    --color-blue-info-dark: #2b6cb0;
    --color-blue-google: #1a73e8;
    --color-navy: rgb(5, 39, 103);
    --color-blue-shadow: rgba(0, 120, 212, 0.2);
    /* ── Text ──────────────────────────────────────────────── */
    --color-text: #333;
    --color-text-dark: #222;
    --color-text-darker: #1a1f1d;
    --color-text-medium: #444;
    --color-text-secondary: #555;
    --color-text-muted: #666;
    --color-text-light: #777;
    --color-text-faint: #888;
    --color-text-placeholder: #6b7280;
    --color-text-gray: #6b6b6b;
    --color-text-slate: #64748b;
    --color-text-mid-gray: #6c757d;
    /* ── White ─────────────────────────────────────────────── */
    --color-white: #ffffff;
    --color-white-semi: #ffffff80;
    --color-white-10: rgba(255, 255, 255, 0.1);
    --color-white-15: rgba(255, 255, 255, 0.15);
    --color-white-30: rgba(255, 255, 255, 0.3);
    --color-white-50: rgba(255, 255, 255, 0.5);
    /* ── Backgrounds / Surfaces ────────────────────────────── */
    --color-bg-page: #f0f2f5;
    --color-bg-light: #f9f9f9;
    --color-bg-faint: #fafafa;
    --color-bg-subtle: #f5f5f5;
    --color-bg-muted: #f4f4f4;
    --color-bg-soft: #f7f7f7;
    --color-bg-wash: #f1f1f1;
    --color-bg-ghost: #f3f3f3;
    --color-bg-pale: #f6f8fa;
    --color-bg-cool: #f7f9fa;
    --color-bg-input: #f4f6f8;
    /* ── Borders ───────────────────────────────────────────── */
    --color-border: #e0e0e0;
    --color-border-light: #e6e6e6;
    --color-border-lighter: #e5e5e5;
    --color-border-faint: #f0f0f0;
    --color-border-soft: #ddd;
    --color-border-medium: #ccc;
    --color-border-dark: #bbb;
    --color-border-gray: #aaa;
    --color-border-e1: #e1e1e1;
    --color-border-d6: #d6d5d5;
    --color-border-e5: #e5e7eb;
    --color-border-f3: #f3f4f6;
    --color-border-cf: #cfcfcf;
    --color-border-2f: #2f2f2f;
    /* ── Overlays / Shadows ────────────────────────────────── */
    --color-overlay-05: rgba(0, 0, 0, 0.05);
    --color-overlay-06: rgba(0, 0, 0, 0.06);
    --color-overlay-10: rgba(0, 0, 0, 0.1);
    --color-overlay-12: rgba(0, 0, 0, 0.12);
    --color-overlay-15: rgba(0, 0, 0, 0.15);
    --color-overlay-20: rgba(0, 0, 0, 0.2);
    --color-overlay-30: rgba(0, 0, 0, 0.3);
    --color-overlay-40: rgba(0, 0, 0, 0.4);
    --color-overlay-45: rgba(0, 0, 0, 0.45);
    --color-overlay-50: rgba(0, 0, 0, 0.5);
    --color-overlay-60: rgba(0, 0, 0, 0.6);
    --color-black-faint: #00000010;
    /* ── Status — Danger / Error ───────────────────────────── */
    --color-danger: #dc3545;
    --color-danger-dark: #c0392b;
    --color-danger-darker: #c53030;
    --color-danger-darkest: #c62828;
    --color-danger-deep: #991b1b;
    --color-danger-bg: #742a2a;
    --color-danger-tint: #fdecea;
    --color-danger-surface: #fee2e2;
    --color-danger-light: #ffe6e6;
    --color-danger-faint: #fff8f8;
    --color-danger-subtle: #ffb3b3;
    --color-danger-shadow: rgba(198, 40, 40, 0.12);
    --color-danger-shadow-strong: rgba(198, 40, 40, 0.4);
    /* ── Status — Warning ──────────────────────────────────── */
    --color-warning: #ffc107;
    --color-warning-orange: #e67e22;
    --color-warning-dark: #b7791f;
    --color-warning-tint: #fef0e6;
    --color-warning-surface: #fff3e0;
    --color-warning-faint: #fffaf5;
    --color-warning-yellow: #f4c542;
    --color-warning-yellow-tint: #fef9c3;
    --color-warning-yellow-dark: #854d0e;
    /* ── Status — Success ──────────────────────────────────── */
    --color-success: #28a745;
    --color-success-alt: #4caf50;
    --color-success-dark: #166534;
    --color-success-tint: #dcfce7;
    --color-success-surface: #e6f4ee;
    --color-success-green: #007a33; /* same as primary */
    /* ── Teal ──────────────────────────────────────────────── */
    --color-teal: #0f766e;
    --color-teal-surface: #def7f5;
    /* ── Special ───────────────────────────────────────────── */
    --color-purple: #3a0647;
    /* ── Spacing Scale ─────────────────────────────────────── */
    --space-1: 0.25rem; /*  4px */
    --space-2: 0.5rem; /*  8px */
    --space-3: 0.75rem; /* 12px */
    --space-4: 1rem; /* 16px */
    --space-5: 1.25rem; /* 20px */
    --space-6: 1.5rem; /* 24px */
    --space-8: 2rem; /* 32px */
    --space-10: 2.5rem; /* 40px */
    --space-12: 3rem; /* 48px */
    --space-16: 4rem; /* 64px */
    --space-20: 5rem; /* 80px */
    --space-24: 6rem; /* 96px */
    --space-32: 8rem; /* 128px */
    /* ── Border Radius ─────────────────────────────────────── */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    /* ── Shadows ───────────────────────────────────────────── */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.07);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
    --shadow-xl: 0 16px 48px rgba(0,0,0,0.14);
    --shadow-card: 0 2px 12px rgba(0,122,51,0.08), 0 1px 3px rgba(0,0,0,0.06);
    --shadow-card-hover: 0 8px 32px rgba(0,122,51,0.16), 0 2px 8px rgba(0,0,0,0.08);
    /* ── Transitions ───────────────────────────────────────── */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
    --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
    /* ── Typography Scale ──────────────────────────────────── */
    --font-family-base: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-family-display: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --text-xs: 0.75rem; /* 12px */
    --text-sm: 0.875rem; /* 14px */
    --text-base: 1rem; /* 16px */
    --text-lg: 1.125rem; /* 18px */
    --text-xl: 1.25rem; /* 20px */
    --text-2xl: 1.5rem; /* 24px */
    --text-3xl: 1.875rem; /* 30px */
    --text-4xl: 2.25rem; /* 36px */
    --text-5xl: 3rem; /* 48px */
    --text-6xl: 3.75rem; /* 60px */

    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    /* ── Z-Index ───────────────────────────────────────────── */
    --z-header: 100;
    --z-overlay: 200;
    --z-modal: 300;
    --z-tooltip: 400;
    /* ── Section backgrounds ───────────────────────────────── */
    --color-section-alt: #f7faf8;
    --color-hero-gradient-start: #0d4f2e;
    --color-hero-gradient-end: #1a7a4a;
    --color-hero-accent: #4ade80;
    /* ── Size ───────────────────────────────── */
    --max-width-main-page: 1200px;
    --max-width-main-prose: 1100px;
}