/* ────────────────────────────────────────────────────────────
   Apple-inspired design tokens
   - SF Pro stack, weights 400/500 only
   - Apple system colors with 14% tinted backgrounds
   - Border radii: 8 / 12 / 14 / 20 (pill)
   - Light is default, dark via [data-theme="dark"] or prefers-color-scheme
   ──────────────────────────────────────────────────────────── */

:root {
    /* ── Apple system colors ── */
    --apple-blue:    #007AFF;
    --apple-green:   #34C759;
    --apple-red:     #FF3B30;
    --apple-amber:   #FF9500;
    --apple-purple:  #AF52DE;
    --apple-teal:    #5AC8FA;
    --apple-gray:    #8E8E93;

    /* Tinted backgrounds (14%) */
    --apple-blue-bg:   #007AFF24;
    --apple-green-bg:  #34C75924;
    --apple-red-bg:    #FF3B3024;
    --apple-amber-bg:  #FF950024;
    --apple-purple-bg: #AF52DE24;
    --apple-teal-bg:   #5AC8FA24;

    /* ── Surfaces (light, default) ── */
    --apple-bg:        #F2F2F7;
    --apple-surface:   #FFFFFF;
    --apple-elevated:  #FFFFFF;
    --apple-label:     #000000;
    --apple-label2:    #3C3C4399;
    --apple-label3:    #3C3C4360;
    --apple-separator: #3C3C4320;

    /* ── Aliases for legacy class names (mapped to Apple) ── */
    --bg-canvas:    var(--apple-bg);
    --bg-surface:   var(--apple-surface);
    --bg-divider:   var(--apple-separator);
    --bg-elevated:  var(--apple-bg);

    --text-primary: var(--apple-label);
    --text-body:    var(--apple-label);
    --text-muted:   var(--apple-label2);
    --text-subtle:  var(--apple-label3);

    --state-danger:        var(--apple-red);
    --state-warn:          var(--apple-amber);
    --state-ok:            var(--apple-green);
    --state-brand:         var(--apple-blue);
    --state-danger-light:  var(--apple-red);
    --state-warn-light:    var(--apple-amber);
    --state-ok-light:      var(--apple-green);
    --state-brand-light:   var(--apple-blue);
    --state-danger-bg:     var(--apple-red-bg);
    --state-warn-bg:       var(--apple-amber-bg);
    --state-ok-bg:         var(--apple-green-bg);
    --state-brand-bg:      var(--apple-blue-bg);

    --accent-empapp: var(--apple-blue);

    /* ── Typography (SF Pro stack) ── */
    --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display',
                 'SF Pro Text', 'Helvetica Neue', 'Inter', 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;

    --type-display-xl: 36px;
    --type-display-lg: 28px;   /* KPI value */
    --type-heading:    20px;
    --type-body-lg:    14px;
    --type-body:       13px;
    --type-eyebrow:    11px;

    /* ── Spacing ── */
    --space-xs:   4px;   --space-sm:   8px;   --space-md:  12px;
    --space-lg:  16px;   --space-xl:  20px;   --space-2xl: 28px;
    --space-3xl: 40px;

    /* ── Radii (Apple) ── */
    --radius-0:    0px;
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   14px;
    --radius-pill: 20px;
}

/* ── Dark mode ── */
[data-theme="dark"] {
    --apple-bg:        #000000;
    --apple-surface:   #1C1C1E;
    --apple-elevated:  #2C2C2E;
    --apple-label:     #FFFFFF;
    --apple-label2:    #EBEBF599;
    --apple-label3:    #EBEBF560;
    --apple-separator: #54545860;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --apple-bg:        #000000;
        --apple-surface:   #1C1C1E;
        --apple-elevated:  #2C2C2E;
        --apple-label:     #FFFFFF;
        --apple-label2:    #EBEBF599;
        --apple-label3:    #EBEBF560;
        --apple-separator: #54545860;
    }
}