:root {
    /* Brand */
    --primary:        #EA580C;
    --primary-rgb:    234, 88, 12;
    --primary-dark:   #ce3c00;
    --primary-light:  #ffeea2;
    --secondary:      #DC2626;
    --secondary-rgb:  220, 38, 38;
    --accent:         #F59E0B;
    --accent-rgb:     245, 158, 11;

    /* Surfaces */
    --bg:             #F2F2F7;
    --surface:        #FFFFFF;
    --surface-2:      #f9f9f9;
    --surface-sunken: #ececf1;

    /* Text */
    --text:           #1C1C1E;
    --text-rgb:       28, 28, 30;
    --text-secondary: #606062;
    --text-muted:     #8E8E93;

    /* Lines */
    --border:         #E5E5EA;
    --border-strong:  #cfcfd4;

    /* Status */
    --success: #30D158;
    --warning: #FF9F0A;
    --danger:  #FF3B30;
    --info:    #64D2FF;

    /* Radii — a small scale, not one value everywhere */
    --r-sm:   8px;
    --r-md:   12px;
    --r-lg:   16px;
    --r-xl:   22px;
    --r-pill: 999px;

    /* Depth: ambient + contact shadow, the iOS way */
    --shadow-1: 0 1px 2px rgba(var(--text-rgb), .04), 0 1px 1px rgba(var(--text-rgb), .03);
    --shadow-2: 0 2px 8px rgba(var(--text-rgb), .05), 0 1px 2px rgba(var(--text-rgb), .04);
    --shadow-3: 0 8px 28px rgba(var(--text-rgb), .08), 0 2px 6px rgba(var(--text-rgb), .04);
    --shadow-4: 0 20px 48px rgba(var(--text-rgb), .13), 0 4px 12px rgba(var(--text-rgb), .06);

    /* Spacing */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

    /* Motion — iOS spring-ish easing */
    --ease:        cubic-bezier(.32, .72, 0, 1);
    --ease-out:    cubic-bezier(.16, 1, .3, 1);
    --dur-fast:    .18s;
    --dur:         .28s;

    /* Type */
    --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
            'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    --nav-h: 56px;
}