/* Safari design tokens — light default */
:root {
    --color-tint: #007AFF;
    --color-tint-pressed: #0056b3;
    --color-bg: #ffffff;
    --color-bg-grouped: #f2f2f7;
    --color-bg-elevated: #ffffff;
    --color-fill-secondary: rgba(118, 118, 128, 0.12);
    --color-fill-tertiary: rgba(118, 118, 128, 0.08);
    --color-separator: rgba(60, 60, 67, 0.29);
    --color-label: #000000;
    --color-label-secondary: rgba(60, 60, 67, 0.6);
    --color-label-tertiary: rgba(60, 60, 67, 0.3);
    --color-danger: #ff3b30;
    --chrome-bg: rgba(255, 255, 255, 0.72);
    --chrome-blur: saturate(180%) blur(20px);
    --radius-pill: 10px;
    --radius-card: 10px;
    --radius-sheet: 12px;
    --toolbar-top-row-height: 44px;
    --tab-strip-height: 36px;
    --toolbar-bottom-height: 50px;
    --chrome-top-height: calc(var(--toolbar-top-row-height) + env(safe-area-inset-top, 0px));
    --chrome-bottom-height: calc(var(--toolbar-bottom-height) + env(safe-area-inset-bottom, 0px));

    /* Legacy aliases */
    --primary-color: var(--color-tint);
    --secondary-color: #8e8e93;
    --danger-color: var(--color-danger);
    --text-color: var(--color-label);
    --bg-color: var(--color-bg-grouped);
    --card-bg: var(--color-bg-elevated);
    --border-color: var(--color-separator);
}

:root.has-tab-strip {
    --chrome-top-height: calc(var(--toolbar-top-row-height) + var(--tab-strip-height) + env(safe-area-inset-top, 0px));
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-tint: #0a84ff;
        --color-tint-pressed: #409cff;
        --color-bg: #000000;
        --color-bg-grouped: #1c1c1e;
        --color-bg-elevated: #2c2c2e;
        --color-fill-secondary: rgba(118, 118, 128, 0.24);
        --color-fill-tertiary: rgba(118, 118, 128, 0.18);
        --color-separator: rgba(84, 84, 88, 0.65);
        --color-label: #ffffff;
        --color-label-secondary: rgba(235, 235, 245, 0.6);
        --color-label-tertiary: rgba(235, 235, 245, 0.3);
        --color-danger: #ff453a;
        --chrome-bg: rgba(28, 28, 30, 0.72);
    }
}