/* Allfood Design System v1 — canonical shared visual tokens.
   Add before style.css during migration. Do not delete legacy variables until references are migrated. */

:root {
    /* Brand */
    --af-blue: #67B7E4;
    --af-blue-dark: #2B8FCA;
    --af-blue-soft: #EEF8FF;
    --af-orange: #F25C2E;
    --af-orange-soft: #FFF1EB;
    --af-yellow: #F7BD2B;

    /* Neutrals */
    --af-ink: #1E293B;
    --af-muted: #64748B;
    --af-line: #EDF1F5;
    --af-bg: #FFFFFF;
    --af-soft: #F8FAFC;
    --af-card: #FFFFFF;
    --af-dark-surface: #101828;

    /* Semantic */
    --af-success: #16A34A;
    --af-danger: #DC2626;

    /* Layout */
    --af-content-max: 1200px;
    --af-page-pad-desktop: 16px;
    --af-page-pad-mobile: 12px;
    --af-page-pad-mobile-compact: 10px;

    /* Spacing */
    --af-space-1: 4px;
    --af-space-2: 8px;
    --af-space-3: 12px;
    --af-space-4: 16px;
    --af-space-5: 20px;
    --af-space-6: 24px;
    --af-space-7: 28px;
    --af-space-8: 32px;

    /* Radius */
    --af-radius-control: 14px;
    --af-radius-card: 18px;
    --af-radius-category: 22px;
    --af-radius-panel: 24px;
    --af-radius-feature: 26px;
    --af-radius-large: 28px;
    --af-radius-pill: 999px;

    /* Controls */
    --af-control-height: 44px;
    --af-control-height-lg: 48px;

    /* Shadows */
    --af-shadow-card: 0 10px 28px rgba(15, 23, 42, .05);
    --af-shadow-elevated: 0 18px 48px rgba(15, 23, 42, .055);
    --af-shadow-sticky: 0 -10px 34px rgba(15, 23, 42, .16);

    /* Existing alias retained for backward compatibility */
    --af-shadow: 0 14px 34px rgba(15, 23, 42, .07);

    /* Typography */
    --af-font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}