:root {
    /* KurdCOC — spring meadow palette */
    --color-primary: #2dd4bf;
    --color-primary-dark: #0d9488;
    --color-primary-light: #5eead4;
    --color-primary-glow: rgba(45, 212, 191, 0.38);

    --color-secondary: #4ade80;
    --color-secondary-dark: #16a34a;

    --color-sky: #7dd3fc;
    --color-sky-dark: #0284c7;

    --color-blossom: #f9a8d4;
    --color-blossom-dark: #ec4899;

    --color-cta: #fb7185;
    --color-cta-dark: #e11d48;
    --color-cta-hover: #fda4af;

    --color-bg: #0f1f1c;
    --color-bg-elevated: #1a2e28;
    --color-bg-deep: #1e3a32;
    --color-bg-card: rgba(15, 40, 32, 0.92);
    --color-text: #ecfdf5;
    --color-text-muted: #a7c4bc;
    --color-text-subtle: #6b8f83;
    --color-border: rgba(94, 234, 212, 0.12);
    --color-border-strong: rgba(45, 212, 191, 0.32);

    --color-accent-orange: #fb923c;
    --color-accent-blue: #38bdf8;
    --color-accent-amber: #facc15;
    --color-accent-cyan: #22d3ee;
    --color-accent-red: #f87171;
    --color-success: #4ade80;
    --color-danger: #fca5a5;

    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    --gradient-primary-hover: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    --gradient-cta: linear-gradient(135deg, var(--color-cta) 0%, var(--color-cta-dark) 100%);
    --gradient-cta-hover: linear-gradient(135deg, var(--color-cta-hover) 0%, var(--color-cta) 100%);
    --gradient-sun: linear-gradient(135deg, #fde047 0%, #f59e0b 100%);
    --gradient-attack: linear-gradient(135deg, var(--color-cta) 0%, #be123c 100%);
    --gradient-page: linear-gradient(160deg, var(--color-bg) 0%, var(--color-bg-elevated) 45%, var(--color-bg-deep) 100%);
    --gradient-card-media: linear-gradient(135deg, #14532d 0%, #0f766e 100%);
    --gradient-shine: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.06) 50%, transparent 75%);

    --font-heading: 'Fredoka', 'Noto Sans Arabic', sans-serif;
    --font-body: 'Nunito', 'Noto Sans Arabic', sans-serif;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;

    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.35);
    --shadow-glow-primary: 0 0 22px var(--color-primary-glow);
    --shadow-glow-cta: 0 0 18px rgba(251, 113, 133, 0.32);

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-fast: 150ms var(--ease-out);
    --transition-base: 280ms var(--ease-out);
    --transition-slow: 420ms var(--ease-out);

    --z-header: 100;
    --z-fab: 90;
    --z-toast: 1000;

    --header-height-mobile: 7.25rem;
    --header-height-desktop: 5.25rem;
    --touch-min: 44px;

    --max-width-content: 80rem;
    --max-width-narrow: 56rem;
    --max-width-tool: 900px;

    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}