/* ================================================
   Pola Natury – CSS Custom Properties
   Single source of truth. Use var(--*) directly.
   No variable references another variable.
   ================================================ */

:root {
    /* ── Typography ── */
    --font-sans: 'DM Sans';
    --font-serif: DM Serif Display, serif;
    --font-body: 'DM Sans', sans-serif;
    --font-display: 'DM Sans';
    /* ── Border radii ── */
    --radius-xs: 2px; /* progress bar fills */
    --radius-sm: 6px; /* checkboxes, small chips */
    --radius-md: 8px; /* alert banners, drop zones */
    --radius-lg: 12px; /* dropdown panels, hint boxes */
    --radius-xl: 16px; /* file previews, validation summary */
    --radius-card-sm: 20px; /* small sidebar elements */
    --radius-input: 16px; /* all form inputs */
    --radius-btn: 16px; /* all standard (48px) buttons */
    --radius-btn-sm: 12px; /* small (40px) buttons & pills */
    --radius-card: 24px; /* card containers */
    --radius-card-lg: 32px; /* large panels and modals */
    --radius-card-xl: 48px; /* extra-large registration card */
    --radius-full: 50%; /* circular elements (avatars) */
    /* -- Spacing -- */
    --spacing-sm: 48px;
    /* ── Surfaces & backgrounds ── */
    --color-bg: #F6F5E8;
    --color-bg-auth: #F6F5E8;
    --color-bg-hover: #F2F5F2;
    --color-bg-disabled: #F5F5F5;
    --color-white: #FFFFFF;
    --color-bg-green: #3E4A29;
    --color-bg-help: #576245;
    --color-bg-subtle: #E5E4D4;
    --color-bg-light: #BCC79D;
    /* ── Brand greens ── */
    --color-green-900: #1C3A1E;
    --color-green-900-hover: #16321A;
    --color-green-900-active: #102A14;
    --color-green-700: #3E4A29;
    --color-green-700-hover: #E5E4D4;
    --color-green-700-active: #E5E4D4;
    --color-green-700-hover-active: #C5C5B3;
    --color-green-deep: #355F38;
    --color-green-500: #3E4A29;
    --color-green-500-hover: #576245;
    --color-green-500-active: #707961;
    --color-green-500-disabled: #929986;
    --color-green-muted: #5A6B57;
    --color-green-400: #929986;
    --color-green-400-hover: #576245;
    --color-green-400-active: #3E4A29;
    --color-green-200: #E3E7E1;
    --color-green-200-hover: #D8DDD5;
    --color-green-200-active: #CDD3C9;
    --color-green-100: #DCE3DC;
    /* ── Translucent overlays ── */
    --color-green-900-a05: rgba(28, 58, 30, 0.05);
    --color-green-900-a55: rgba(28, 58, 30, 0.55);
    --color-green-900-a90: rgba(28, 58, 30, 0.90);
    --color-green-500-a05: rgba(102, 130, 107, 0.05);
    --color-green-500-a10: rgba(102, 130, 107, 0.10);
    --color-text-mid-a05: rgba(63, 63, 60, 0.05);
    --color-text-mid-a10: rgba(63, 63, 60, 0.10);
    --color-shadow-sm: rgba(0, 0, 0, 0.08);
    /* ── Text ── */
    --color-text-dark: #21241D;
    --color-text-mid: #21241D;
    --color-text-subtle: #4B5563;
    --color-text-muted: #88867D;
    --color-text-bullet: #444444;
    --color-text-light: #E0E0E0;
    --color-text-bright: #F3F3F3;
    --color-text-night: #3F3F3C;
    /* ── Borders ── */
    --color-border: #C5C5B3;
    --color-border-medium: #A8A8A5;
    --color-border-light: #E5E7EB;
    --color-border-disabled: #DDDDDD;
    --color-border-dark: #21241D;
    /* ── Disabled ── */
    --color-disabled-checked: #B0B0B0;
    /* ── Status: error ── */
    --color-error: #D64545;
    --color-error-dark: #991B1B;
    --color-error-bg: #FEF2F2;
    --color-error-bg-light: #F8DFDF;
    --color-error-border: #FCA5A5;
    /* ── Status: success ── */
    --color-success-text: #166534;
    --color-success-bg: #F0FDF4;
    --color-success-border: #86EFAC;
    /* ── Landing accent ── */
    --color-accent: #C9D261;
    --color-light-secondary: #EBEDEA;
    /* -- Labels -- */
    --color-1st-grade: #E3EA40;
    --color-2nd-grade: #BCC79D;
    --color-3rd-grade: #E5E4D4;
}