/*
 * Figma design tokens extracted from docs/old/table.css
 * (the "iPhone 13/14 landscape" table artboard — 844x390).
 *
 * Tokens are scoped to :root so any component in the app can
 * consume them via var(--token-name). Existing components in
 * game.css / screens.css keep their current values; opt in to
 * the Figma look per-rule by switching to these variables.
 */

:root {
    /* ---------- Brand / card palette ---------- */
    --te-card-face-start: #F6F6F5;
    --te-card-face-end:   #FFFFFF;
    --te-card-border:     rgba(42, 42, 42, 0.5);
    --te-suit-red:        #BA0A0A;
    --te-suit-black:      #000000;

    /* ---------- Surfaces ---------- */
    --te-panel-bg:            rgba(0, 0, 0, 0.37);
    --te-panel-border:        #030404;
    --te-avatar-border:       rgba(87, 85, 85, 0.9);
    --te-active-turn-accent:  rgba(246, 168, 6, 0.98);

    /* ---------- Text ---------- */
    --te-text-on-dark: #FFFFFF;

    /* ---------- Action button palettes ---------- */
    /* Warm pill (likely Pass) */
    --te-btn-warm-start: #FFFF93;
    --te-btn-warm-end:   #FFA444;
    /* Monochrome pill (likely Hint / Sort) */
    --te-btn-mono-start: #FFFFF8;
    --te-btn-mono-end:   #242323;
    /* Cool pill (likely Play) */
    --te-btn-cool-start: #9DF8FA;
    --te-btn-cool-end:   #7669FF;

    /* ---------- Gradients (prebuilt) ---------- */
    --te-card-face-gradient:
        linear-gradient(270.51deg,
            var(--te-card-face-start) 0.44%,
            var(--te-card-face-end) 99.56%);

    --te-panel-dark-gradient:
        linear-gradient(163.32deg,
            rgba(0, 0, 0, 0.37) -7.33%,
            rgba(102, 102, 102, 0.37) 124.24%);

    --te-btn-warm-gradient:
        linear-gradient(180deg,
            var(--te-btn-warm-start) 0%,
            var(--te-btn-warm-end) 65.87%);

    --te-btn-mono-gradient:
        linear-gradient(180deg,
            var(--te-btn-mono-start) 10.1%,
            var(--te-btn-mono-end) 100%);

    --te-btn-cool-gradient:
        linear-gradient(180deg,
            var(--te-btn-cool-start) 0%,
            var(--te-btn-cool-end) 62.5%);

    /* ---------- Shadows ---------- */
    --te-shadow-card:
        0 4px 4px rgba(0, 0, 0, 0.25),
        0 8px 15px rgba(0, 0, 0, 0.12);
    --te-shadow-card-stroke: 3px 3px 4px rgba(0, 0, 0, 0.9);
    --te-shadow-avatar:      0 4px 4px rgba(0, 0, 0, 0.25);
    --te-shadow-btn-drop:    1px 4px 4px rgba(87, 85, 85, 0.9);
    --te-glow-active-turn:   0 0 8px rgba(246, 168, 6, 0.4);

    /* ---------- Radii ---------- */
    --te-radius-sm:   4px;
    --te-radius-md:   5px;
    --te-radius-pill: 25px;

    /* ---------- Typography ---------- */
    --te-font-body:    'Ubuntu', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --te-font-display: 'Protest Strike', 'Ubuntu', system-ui, sans-serif;

    --te-font-weight-regular: 400;
    --te-font-weight-medium:  500;

    /* Figma used very small type at a fixed 844x390 artboard.
       These raw sizes are preserved; apps should scale via rem/
       clamp() rather than use them verbatim. */
    --te-text-micro:  6px;  /* active-turn badge */
    --te-text-xs:     8px;  /* "N cards left" */
    --te-text-sm:     9px;  /* rotated top-pane name */
    --te-text-base:  10px;  /* player names */
    --te-text-lg:    18px;  /* action-button labels */

    --te-letter-spacing-wide: 0.04em;

    /* ---------- Component reference sizes ---------- */
    /* Raw Figma dimensions. Prefer clamp()/ratios in real CSS;
       these are here to keep proportions honest. */
    --te-card-width:       58px;
    --te-card-height:      77px;
    --te-card-aspect:      58 / 77;

    --te-panel-side-width:   51px;
    --te-panel-side-height:  84px;
    --te-panel-top-width:    52px;
    --te-panel-top-height:  100px;

    --te-btn-width:   66px;
    --te-btn-height:  27px;

    --te-active-turn-width:   51px;
    --te-active-turn-height:  21px;
}