/*
 * Design tokens ported from samzvi.site for visual/behavioral parity
 * between samzvi.site and game.samzvi.site.
 * Theme is controlled via the [data-theme] attribute on <html>.
 */

:root {
    /* Typography */
    --font-family-base: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Backgrounds */
    --bg-body: #ffffff;
    --bg-surface: #f4f5f2;
    --bg-surface-alt: #e9ece7;
    --bg-elevated: #ffffff;

    /* Text */
    --text-primary: #202b31;
    --text-secondary: #4c5c64;
    --text-muted: #596b73;
    --text-on-primary: #ffffff;
    --text-on-danger: #ffffff;

    /* Borders */
    --border-default: #dee2e6;
    --border-light: #e0e0e0;
    --border-strong: #cccccc;

    /* Brand / accent */
    --color-primary: #087f78;
    --color-primary-hover: #06635e;
    --color-primary-soft: #e1f2ee;
    --color-success: #207342;
    --color-success-hover: #1e7e34;
    --color-danger: #dc3545;
    --color-danger-hover: #c82333;
    --color-warning: #ffc107;
    --color-secondary: #596b73;
    --color-secondary-hover: #545b62;
    --color-orange: #dd853b;
    --tank-blue: #428bd2;

    /* Alerts */
    --alert-success-bg: #d4edda;
    --alert-success-text: #155724;
    --alert-success-border: #c3e6cb;
    --alert-danger-bg: #f8d7da;
    --alert-danger-text: #721c24;
    --alert-danger-border: #f5c6cb;
    --alert-info-bg: #d1ecf1;
    --alert-info-text: #0c5460;
    --alert-info-border: #bee5eb;
    --alert-warning-bg: #fff3cd;
    --alert-warning-text: #856404;
    --alert-warning-border: #ffeeba;

    /* Inputs */
    --input-bg: #ffffff;
    --input-border: #dddddd;
    --input-focus-border: #087f78;
    --input-focus-ring: rgba(0, 123, 255, 0.25);

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.3);

    /* Layout */
    --header-bg: #ffffff;
    --footer-bg: #ffffff;
    --header-border: #cccccc;
    --logo-color: #000000;
    --footer-text: dimgrey;

    /* Switcher */
    --switcher-bg: #f0f0f0;
    --switcher-inactive: #666666;
    --switcher-inactive-hover: #202b31;

    /* Tables */
    --table-header-bg: #e9ece7;
    --table-row-hover: #f4f5f2;
    --table-border: #dee2e6;

    /* Game-specific (tank strategy board) */
    --board-light-square: #f0d9b5;
    --board-dark-square: #b58863;
    --board-border: #202b31;

    /* Misc */
    --link-color: #087f78;
    --code-bg: #f4f5f2;
    --highlight-purple-bg: #f3e5f5;
    --highlight-purple-border: #9c27b0;
    --highlight-purple-text: #4a148c;
    --highlight-blue-bg: #e3f2fd;
    --highlight-blue-border: #2196f3;
    --highlight-blue-text: #0d47a1;
    --highlight-blue-code-bg: #bbdefb;
    --your-turn-bg: linear-gradient(to right, #fff3cd, transparent);
    --your-turn-border: #ffc107;
    --invite-bg: linear-gradient(to right, #e7f3ff, transparent);
    --invite-status: #0066cc;

    /* App-specific (this project) */
    --app-modal-bg: var(--bg-elevated);
    --app-modal-shadow: var(--shadow-lg);
    --app-backdrop: rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] {
    /* Backgrounds */
    --bg-body: #11191d;
    --bg-surface: #172227;
    --bg-surface-alt: #202e34;
    --bg-elevated: #202e34;

    /* Text */
    --text-primary: #eef3f3;
    --text-secondary: #b8c7cb;
    --text-muted: #9badb3;
    --text-on-primary: #11191d;
    --text-on-danger: #ffffff;

    /* Borders */
    --border-default: #31434b;
    --border-light: #21262d;
    --border-strong: #526871;

    /* Brand / accent */
    --color-primary: #6dd6c2;
    --color-primary-hover: #8ae3d2;
    --color-primary-soft: #193b37;
    --color-success: #7adba0;
    --color-success-hover: #56d364;
    --color-danger: #f85149;
    --color-danger-hover: #ff6b63;
    --color-warning: #d29922;
    --color-secondary: #526871;
    --color-secondary-hover: #6e7681;
    --color-orange: #eaa267;
    --tank-blue: #6aa9e4;

    /* Alerts */
    --alert-success-bg: #0d2818;
    --alert-success-text: #7adba0;
    --alert-success-border: #1b4332;
    --alert-danger-bg: #2d0d0d;
    --alert-danger-text: #f85149;
    --alert-danger-border: #4c1d1d;
    --alert-info-bg: #0d1d2d;
    --alert-info-text: #6dd6c2;
    --alert-info-border: #193b37;
    --alert-warning-bg: #2d2200;
    --alert-warning-text: #d29922;
    --alert-warning-border: #4d3800;

    /* Inputs */
    --input-bg: #11191d;
    --input-border: #31434b;
    --input-focus-border: #6dd6c2;
    --input-focus-ring: rgba(88, 166, 255, 0.3);

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.6);

    /* Layout */
    --header-bg: #172227;
    --footer-bg: #172227;
    --header-border: #31434b;
    --logo-color: #eef3f3;
    --footer-text: #9badb3;

    /* Switcher */
    --switcher-bg: #21262d;
    --switcher-inactive: #9badb3;
    --switcher-inactive-hover: #eef3f3;

    /* Tables */
    --table-header-bg: #202e34;
    --table-row-hover: #202e34;
    --table-border: #31434b;

    /* Game-specific (tank strategy board) */
    --board-light-square: #4a5568;
    --board-dark-square: #2d3748;
    --board-border: #6dd6c2;

    /* Misc */
    --link-color: #6dd6c2;
    --code-bg: #172227;
    --highlight-purple-bg: #2d1b3d;
    --highlight-purple-border: #9c27b0;
    --highlight-purple-text: #ce93d8;
    --highlight-blue-bg: #0d1d2d;
    --highlight-blue-border: #6dd6c2;
    --highlight-blue-text: #90caf9;
    --highlight-blue-code-bg: #193b37;
    --your-turn-bg: linear-gradient(to right, #2d2200, transparent);
    --your-turn-border: #d29922;
    --invite-bg: linear-gradient(to right, #0d1d2d, transparent);
    --invite-status: #6dd6c2;

    /* App-specific (this project) */
    --app-modal-bg: var(--bg-elevated);
    --app-modal-shadow: var(--shadow-lg);
    --app-backdrop: rgba(0, 0, 0, 0.7);
}