/*
 * Compatibility bridge:
 * Maps the new semantic token contract to legacy iOS/GM variables.
 */

:root {
    /* Legacy iOS variables used by public/assets/css/*.css */
    --ios-bg: var(--surface-bg);
    --ios-secondary-bg: var(--surface-card);
    --ios-tertiary-bg: var(--surface-elevated);
    --ios-separator: var(--theme-separator, rgba(58, 58, 60, 0.85));
    --ios-label: var(--text-primary);
    --ios-secondary-label: var(--text-muted);
    --ios-accent: var(--action-primary-bg);
    --ios-danger: var(--color-danger);
    --ios-success: var(--color-success);
    --ios-blue: var(--action-primary-bg);
    --ios-red: var(--color-danger);
    --ios-card: var(--surface-card);

    --ios-radius-small: var(--radius-sm);
    --ios-radius: var(--radius-md);
    --ios-radius-large: var(--radius-lg);
    --ios-border-width: var(--border-width-hairline);

    /* Legacy gamified vars used by React game frontend */
    --gm-bg: var(--surface-bg);
    --gm-card: var(--surface-card);
    --gm-card-2: var(--surface-elevated);
    --gm-card-3: #263123;
    --gm-card-4: #131812;
    --gm-ink: var(--text-primary);
    --gm-muted: var(--text-muted);
    --gm-muted-2: var(--color-warning);
    --gm-accent: var(--action-primary-bg);
    --gm-accent-2: var(--action-primary-hover);
    --gm-secondary: #5a4a1c;
    --gm-success: var(--color-success);
    --gm-info: var(--color-info);
    --gm-danger: var(--color-danger);
    --gm-black: #0d110d;

    --gm-shadow: 0 18px 40px rgba(0, 0, 0, .34);
    --gm-shadow-sm: 0 4px 0 rgba(10, 20, 12, .55);
    --gm-shadow-md: 0 10px 24px rgba(0, 0, 0, .26);
    --gm-shadow-lg: 0 16px 34px rgba(0, 0, 0, .35);
    --gm-shadow-xl: 0 24px 50px rgba(0, 0, 0, .42);

    --gm-radius: var(--radius-md);
    --gm-radius-sm: var(--radius-sm);
    --gm-radius-xs: 8px;
    --gm-radius-full: 50%;
    --gm-transition: var(--motion-speed-base) ease;
    --gm-transition-slow: 0.3s ease;
}