/*
    SmartDukan.Web design tokens.
    Mirrors the mobile app's palette (SmartDukan/wwwroot/css/theme.css) so both
    products share one identity. Light-only, intentionally — no dark theme.
*/
:root {
    --sd-brand: #146C43;
    --sd-brand-strong: #0F4A2E;
    --sd-brand-soft: #E6F4EC;
    --sd-brand-dark: #0A2E1C;
    --sd-on-brand: #FFFFFF;

    --sd-accent-amber: #F2A900;
    --sd-accent-amber-soft: #FEF3D6;

    --sd-danger: #DC2626;
    --sd-success: #16A34A;
    --sd-warning: #B45309;
    --sd-warning-soft: #FEF3C7;

    --sd-accent-blue: #2563EB;
    --sd-accent-blue-soft: #DBEAFE;
    --sd-accent-purple: #7C3AED;
    --sd-accent-purple-soft: #EDE9FE;
    --sd-accent-teal: #0D9488;
    --sd-accent-teal-soft: #CCFBF1;

    --sd-bg: #F4F7FA;
    --sd-surface: #FFFFFF;
    --sd-surface-variant: #F1F5F9;

    --sd-text: #1E293B;
    --sd-text-secondary: #64748B;
    --sd-text-inverse: #FFFFFF;
    --sd-outline: #E2E8F0;

    --sd-radius-sm: 12px;
    --sd-radius: 20px;
    --sd-radius-lg: 28px;
    --sd-radius-pill: 999px;

    --sd-shadow-sm: 0 2px 8px rgba(15, 23, 42, .06);
    --sd-shadow: 0 12px 32px rgba(15, 23, 42, .10);
    --sd-shadow-lg: 0 24px 56px rgba(15, 23, 42, .14);

    --sd-gradient-brand: linear-gradient(135deg, #146C43 0%, #0F4A2E 100%);
    --sd-gradient-hero: radial-gradient(circle at 15% 20%, #E6F4EC 0%, #F4F7FA 45%, #F4F7FA 100%);

    --sd-motion-fast: 150ms;
    --sd-motion: 250ms;
    --sd-motion-slow: 450ms;
    --sd-easing: cubic-bezier(.4, 0, .2, 1);

    --sd-container-max: 1220px;

    /* Shared hero wave graphic (Home hero + the shorter section-sm heroes +
       mirrored on the footer) so all of them stay one identical shape.
       Three layers for depth instead of a single hard-edged curve: a faint
       offset back-swell, the main fill with a subtle top-to-bottom gradient
       that lands on exactly --sd-brand-dark at the bottom (so it seams
       invisibly with the solid ::before block below it), and a thin
       semi-transparent white crest highlight. Amplitude is deliberately
       shallow (~40px over 1440) — a tall wave reads as decoration, a shallow
       one reads as a section transition. */
    --sd-wave-hero: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 170' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='w' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23103F28'/%3E%3Cstop offset='1' stop-color='%230A2E1C'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0,74 C200,74 320,34 540,32 C800,30 940,48 1160,58 C1300,64 1370,68 1440,68 L1440,170 L0,170 Z' fill='%230A2E1C' opacity='.13'/%3E%3Cpath d='M0,88 C180,88 300,50 520,48 C760,46 900,62 1120,72 C1280,79 1360,84 1440,84 L1440,170 L0,170 Z' fill='url(%23w)'/%3E%3Cpath d='M0,88 C180,88 300,50 520,48 C760,46 900,62 1120,72 C1280,79 1360,84 1440,84' fill='none' stroke='%23FFFFFF' stroke-opacity='.5' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --sd-motion-fast: 0ms;
        --sd-motion: 0ms;
        --sd-motion-slow: 0ms;
    }
}