/*
 * Design Tokens — single source of truth for the visual language.
 *
 * These are the only place raw color/spacing/type/motion values should live.
 * Every component references them via var(--token); never hard-code values.
 *
 * Custom properties inherit through shadow DOM boundaries, so these tokens are
 * available to both light-DOM components and the encapsulated game-table
 * components without any per-component wiring.
 *
 * Visual direction is governed by documentation/LOOK_AND_FEEL.md.
 */

:root {
    /* Belote Café Color Palette - Warm & Inviting */
    --primary-color: #d97706;           /* Warm honey brown */
    --primary-hover: #b45309;           /* Darker honey */
    --secondary-color: #6b7280;         /* Warm gray */
    --success-color: #059669;           /* Soft green */
    --warning-color: #f59e0b;           /* Golden amber */
    --error-color: #dc2626;             /* Warm red */
    --accent-color: #fbbf24;            /* Gold accent */

    /* Café-inspired Background Colors */
    --bg-primary: #fefcf3;              /* Cream background */
    --bg-secondary: #f5f1e8;            /* Warm secondary */
    --bg-tertiary: #ede4d3;             /* Soft brown */
    --bg-dark: #78350f;                 /* Dark brown */

    /* Game Board Colors */
    --game-board-bg: linear-gradient(135deg, #2d5a27 0%, #4a7c59 100%); /* Green felt */
    --card-face-color: #ffffff;         /* Clean white cards */
    --card-back-color: #1a472a;         /* Forest green */
    --card-border-color: #374151;       /* Dark border */

    /* Dark / Espresso Surface System (UI shell redesign)
       Translucent warm-dark surfaces for chrome & panels over the immersive
       café backdrop. See documentation/LOOK_AND_FEEL.md and UI_SHELL.md. */
    --surface: rgba(43, 24, 10, 0.60);              /* base chrome (nav, panels) */
    --surface-elevated: rgba(58, 33, 14, 0.82);     /* cards / pills / elevated */
    --surface-border: rgba(255, 245, 230, 0.14);    /* faint light hairline */
    --surface-hover: rgba(255, 245, 230, 0.08);     /* hover wash on surfaces */
    --panel: rgba(33, 18, 6, 0.86);                 /* darker contrast panel for copy */
    --on-surface: var(--text-inverse);              /* primary text on surfaces (cream) */
    --on-surface-muted: rgba(254, 252, 243, 0.66);  /* secondary text on surfaces */

    /* Text Colors with Warm Tones */
    --text-primary: #451a03;            /* Dark brown text */
    --text-secondary: #78716c;          /* Warm gray */
    --text-inverse: #fefcf3;            /* Cream on dark */

    /* Border Colors */
    --border-light: #e7d3b7;            /* Light brown border */
    --border-medium: #d1af8d;           /* Medium brown */
    --border-dark: #92400e;             /* Dark brown */

    /* Team Colors - Warmer Palette */
    --team-1-color: #4a90e2;            /* Warm blue */
    --team-1-color-rgb: 74, 144, 226;
    --team-2-color: #e24a4a;            /* Warm red */
    --team-2-color-rgb: 226, 74, 74;

    /* Player UI Colors */
    --current-player-bg: #fef3c7;       /* Light gold */
    --current-player-border: #f59e0b;   /* Gold border */
    --partner-bg: #d1fae5;              /* Light green */
    --partner-border: #059669;          /* Green border */

    /* Bidding Interface Colors */
    --bidding-bg: rgba(254, 252, 243, 0.98);  /* Semi-transparent cream */
    --bidding-border: #d97706;               /* Honey brown */

    /* Scoring Colors */
    --score-display-bg: #ffffff;
    --score-display-border: #e7d3b7;
    --progress-bg: #f3f4f6;

    /* Connection Status Colors */
    --status-connected: #059669;
    --status-connecting: #f59e0b;
    --status-disconnected: #dc2626;

    /* Spacing Scale */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */

    /* Typography - Friendly & Readable */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-display: 'Inter', Georgia, serif;
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */

    /* Shadows - Soft & Warm */
    --shadow-sm: 0 1px 2px 0 rgba(120, 53, 15, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(120, 53, 15, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(120, 53, 15, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(120, 53, 15, 0.1);

    /* Border Radius - Rounded & Friendly */
    --radius-sm: 0.25rem;    /* 4px */
    --radius-md: 0.5rem;     /* 8px */
    --radius-lg: 0.75rem;    /* 12px */
    --radius-xl: 1rem;       /* 16px */

    /* Transitions - Smooth & Satisfying */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Card Dimensions — scale with viewport height (the limiting axis) so hands
       shrink on short screens (e.g. 1024×768) and grow on tall ones (1080p+),
       instead of being pinned near a fixed cap on every resolution. */
    --card-width: clamp(96px, 15vh, 176px);
    --card-height: calc(var(--card-width) * 1.5);
}