/* Design System Tokens - shared across extension web surfaces.
 * Popup CSS links this file directly, while the srcdoc picker inlines it via webpack.
 */

:root {
    color-scheme: light dark;

    /* Colors - match iOS system values */
    --ds-accent: #007AFF;
    --ds-success: #34C759;
    --ds-warning: #FF9500;
    --ds-danger: #FF3B30;
    --ds-info: #5AC8FA;
    --ds-bg: #F2F2F7;
    --ds-surface: #FFFFFF;
    --ds-surface-secondary: #F2F2F7;
    --ds-surface-hover: #D0D1D5;
    --ds-text: #1D1D1F;
    --ds-text-primary: var(--ds-text);
    --ds-text-secondary: #8E8E93;
    /* AIDEV-NOTE: Match iOS tertiary label tone for subdued metadata text. */
    --ds-text-tertiary: #AEAEB2;
    --ds-border: #C6C6C8;
    --ds-separator: #C6C6C8;

    /* Spacing (4pt grid) */
    --ds-space-xs: 4px;
    --ds-space-sm: 8px;
    --ds-space-md: 16px;
    --ds-space-lg: 24px;
    --ds-space-xl: 32px;
    --ds-space-xxl: 48px;

    /* Radii */
    --ds-radius-sm: 8px;
    --ds-radius-md: 12px;
    --ds-radius-lg: 16px;
    --ds-radius-pill: 999px;

    /* Shadows */
    --ds-shadow-color: rgba(0, 0, 0, 0.12);
    --ds-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
    --ds-shadow-md: 0 8px 24px var(--ds-shadow-color);
    --ds-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.2);

    /* Glass effects */
    --ds-glass-blur: 20px;
    --ds-glass-saturate: 200%;
    --ds-glass-bg: rgba(255, 255, 255, 0.56);
    --ds-glass-bg-pressed: rgba(255, 255, 255, 0.72);
    --ds-glass-border: rgba(255, 255, 255, 0.32);
    --ds-glass-specular-start: rgba(255, 255, 255, 0.25);
    --ds-glass-inset-shadow: inset 0 2px 8px rgba(255, 255, 255, 0.2);
    --ds-overlay: rgba(0, 0, 0, 0.3);

    /* Interactive fills */
    --ds-accent-fill: rgba(0, 122, 255, 0.14);
    --ds-accent-fill-pressed: rgba(0, 122, 255, 0.2);
    --ds-accent-border: rgba(0, 122, 255, 0.2);
    --ds-danger-fill: rgba(255, 59, 48, 0.14);
    --ds-danger-fill-pressed: rgba(255, 59, 48, 0.2);
    --ds-danger-border: rgba(255, 59, 48, 0.2);

    /* Typography */
    --ds-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
    --ds-font-mono: 'SF Mono', ui-monospace, monospace;
    --ds-font-size-body: 1.0625rem;
    --ds-font-size-headline: 1.0625rem;
    --ds-font-size-subheadline: 0.9375rem;
    --ds-font-size-caption: 0.8125rem;
    --ds-font-size-caption-small: 0.6875rem;
    /* AIDEV-NOTE: F4.2 — Keep old names as aliases for backward compatibility */
    --ds-font-body: var(--ds-font-size-body);
    --ds-font-headline: var(--ds-font-size-headline);
    --ds-font-subheadline: var(--ds-font-size-subheadline);
    --ds-font-caption: var(--ds-font-size-caption);
    --ds-font-caption-small: var(--ds-font-size-caption-small);

    /* Controls */
    --ds-touch-target: 44px;

    /* Animation */
    --ds-duration-fast: 0.2s;
    --ds-duration-normal: 0.3s;
    --ds-duration-slow: 0.4s;
    --ds-anim-fast: var(--ds-duration-fast);
    --ds-anim-normal: var(--ds-duration-normal);
    --ds-anim-slow: var(--ds-duration-slow);
    --ds-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
    /* AIDEV-NOTE: F2.4 — cubic-bezier fallback; overridden by linear() spring below */
    --ds-ease-emphasized: cubic-bezier(0.2, 0.9, 0.3, 1);

    /* System font keyword tokens — map to iOS dynamic type styles */
    /* AIDEV-NOTE: F4.2 — These use -apple-system-* keywords that respect the user's
     * Dynamic Type size preference. Use for key text that should scale with system settings. */
    --ds-font-system-body: -apple-system-body;
    --ds-font-system-headline: -apple-system-headline;
    --ds-font-system-subheadline: -apple-system-subheadline;
    --ds-font-system-caption: -apple-system-caption1;
}

/* AIDEV-NOTE: F2.4 — CSS linear() spring easing approximating dampingRatio 0.85.
 * Overrides the cubic-bezier fallback above in browsers that support linear(). */
@supports (animation-timing-function: linear(0, 1)) {
    :root {
        --ds-ease-emphasized: linear(0, 0.006, 0.025, 0.058, 0.104, 0.162, 0.229, 0.304, 0.383, 0.465, 0.547, 0.628, 0.705, 0.778, 0.844, 0.903, 0.954, 0.996, 1.029, 1.053, 1.068, 1.075, 1.074, 1.067, 1.054, 1.037, 1.017, 0.996, 0.975, 0.956, 0.939, 0.926, 0.916, 0.91, 0.907, 0.907, 0.91, 0.915, 0.922, 0.93, 0.938, 0.946, 0.954, 0.961, 0.967, 0.973, 0.978, 0.982, 0.986, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --ds-accent: #0A84FF;
        --ds-success: #30D158;
        --ds-warning: #FF9F0A;
        --ds-danger: #FF453A;
        --ds-info: #64D2FF;
        --ds-bg: #000000;
        --ds-surface: #1C1C1E;
        --ds-surface-secondary: #000000;
        --ds-surface-hover: #3A3A3C;
        --ds-text: #F5F5F7;
        --ds-text-primary: var(--ds-text);
        --ds-text-secondary: #8E8E93;
        --ds-text-tertiary: #636366;
        --ds-border: #38383A;
        --ds-separator: #38383A;
        --ds-shadow-color: rgba(0, 0, 0, 0.3);
        --ds-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.15);
        --ds-shadow-md: 0 8px 24px var(--ds-shadow-color);
        --ds-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
        --ds-glass-bg: rgba(28, 28, 30, 0.72);
        --ds-glass-bg-pressed: rgba(58, 58, 60, 0.88);
        --ds-glass-border: rgba(255, 255, 255, 0.12);
        --ds-glass-specular-start: rgba(255, 255, 255, 0.1);
        --ds-glass-inset-shadow: inset 0 2px 8px rgba(255, 255, 255, 0.05);
        --ds-accent-fill: rgba(10, 132, 255, 0.24);
        --ds-accent-fill-pressed: rgba(10, 132, 255, 0.32);
        --ds-accent-border: rgba(10, 132, 255, 0.28);
        --ds-danger-fill: rgba(255, 69, 58, 0.24);
        --ds-danger-fill-pressed: rgba(255, 69, 58, 0.32);
        --ds-danger-border: rgba(255, 69, 58, 0.28);
    }
}