/*
 * tokens.css — Design tokens for Dealer Blackjack V2 UI.
 *
 * Single source of truth for colors, typography, radii, shadows, and the
 * stream-framing variables that let us re-aim the Unreal camera output
 * without touching JavaScript.
 *
 * Tune these to retarget the Unreal camera framing once the UE camera is
 * locked. No JS change needed.
 *
 *   --stream-height       Height of the Pixel Streaming video layer
 *                         (top portion of mobile portrait).
 *   --stream-object-x/y   object-position for the <video> element.
 *
 * All other tokens are stylistic.
 */

:root {
    /* ── Pixel Streaming framing (tunable) ──────────────────────────────────
     *
     * Below this stream height lives #bj-ui-stack — a vertical flex column
     * of five slots (status, dealer, active hand, rail, actions). Slots
     * never overlap each other; they reserve min-heights and the action
     * slot absorbs any leftover space.
     *
     * Total stack min-height ≈ 380px (= 30+50+96+56+110 + gaps + padding
     * + safe-bottom). On a 390×844 reference phone that requires ≤55dvh
     * of stream, ≥45dvh of dark zone. 50dvh gives a comfortable margin.
     *
     * Tune these three variables to retarget the Unreal camera framing
     * once the camera is locked. No JS change needed. */
    --stream-height:        55dvh;
    --stream-object-x:      50%;
    --stream-object-y:      50%;
}

/* On shorter phones (390×844, 393×852, 412×917) 55dvh leaves the gameplay
 * stack ~30px short. Drop to 50dvh so the layout fits cleanly. Larger
 * phones (e.g., 430×932 Pro Max) keep the spec'd 55dvh framing. */
@media (orientation: portrait) and (max-height: 900px) {
    :root { --stream-height: 50dvh; }
}

/* Very short portrait (iPhone SE 375x667, 360x740): the gameplay stack needs
 * ~430px once cards are dealt, so the dealer band has to give way further. */
@media (orientation: portrait) and (max-height: 780px) {
    :root { --stream-height: 42dvh; }
}

/* Landscape phones. Neither of the portrait overrides above applied here, so
 * a 844x390 phone kept 55dvh (=214px) of video and pushed the seat rail and
 * the Hit/Stand panel clean off the bottom of the screen. Landscape uses the
 * edge-anchored layout in desktop.css, where the video is full-bleed and
 * --stream-height is not used for framing — this value only feeds the scrim
 * fallback. */
@media (orientation: landscape) {
    :root { --stream-height: 100dvh; }
}

:root {
    /* (continuation of :root — split only for the @media block above) */

    /* ── Surface / brand ──────────────────────────────────────────────────── */
    --bg-page:              #0a0a0d;
    --bg-overlay:           rgba(10, 10, 13, 0.72);
    --surface-1:            rgba(20, 20, 26, 0.85);
    --surface-2:            rgba(28, 28, 36, 0.92);
    --surface-3:            rgba(36, 36, 46, 0.94);
    --surface-card:         #faf7f0;
    --hairline:             rgba(255, 255, 255, 0.08);
    --hairline-strong:      rgba(255, 255, 255, 0.18);

    --gold:                 #c9a56a;
    --gold-soft:            rgba(201, 165, 106, 0.18);
    --gold-strong:          #e6c285;

    --text-primary:         #f5f3ee;
    --text-secondary:       rgba(245, 243, 238, 0.7);
    --text-tertiary:        rgba(245, 243, 238, 0.46);
    --text-mono-gold:       #c9a56a;

    --win:                  #4ade80;
    --win-soft:             rgba(74, 222, 128, 0.16);
    --lose:                 #f87171;
    --lose-soft:            rgba(248, 113, 113, 0.16);
    --push:                 #c9a56a;
    --push-soft:            rgba(201, 165, 106, 0.16);

    --suit-red:             #d93b3b;
    --suit-black:           #15161a;

    /* Chip colors */
    --chip-1:               #f0f0f0;
    --chip-5:               #e25555;
    --chip-25:              #3fb371;
    --chip-50:              #4a7cc4;
    --chip-100:             #1d1d1d;
    --chip-500:             #8b4cb8;
    --chip-1000:            #d4a23a;

    /* ── Typography ───────────────────────────────────────────────────────── */
    --font-display:         "Georgia", "Times New Roman", serif;
    --font-ui:              "Montserrat", system-ui, -apple-system, sans-serif;
    --font-mono:            ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* ── Radii ────────────────────────────────────────────────────────────── */
    --r-sm:                 6px;
    --r-md:                 10px;
    --r-lg:                 14px;
    --r-xl:                 20px;
    --r-pill:               999px;

    /* ── Shadows ──────────────────────────────────────────────────────────── */
    --shadow-card:          0 8px 30px rgba(0, 0, 0, 0.55);
    --shadow-panel:         0 -12px 36px rgba(0, 0, 0, 0.55);
    --shadow-chip:          0 2px 6px rgba(0, 0, 0, 0.5),
                            inset 0 -2px 0 rgba(0, 0, 0, 0.35);

    /* ── Motion ───────────────────────────────────────────────────────────── */
    --ease-out-quint:       cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-quad:         cubic-bezier(0.55, 0, 0.68, 0.19);
    --t-fast:               160ms;
    --t-med:                280ms;
    --t-slow:               420ms;

    /* ── Z-index scale (overlay only — PS video is below #blackjack-root) ── */
    --z-stream-scrim:       1;
    --z-top-hud:            10;
    --z-player-strip:       20;
    --z-hand-display:       30;
    --z-betting-panel:      40;
    --z-decision-panel:     40;
    --z-result-panel:       50;
    --z-sheet:              60;
    --z-reconnect:          70;
    --z-toast:              80;

    /* ── Safe area (iOS notch / Android gesture bar) ──────────────────────── */
    --safe-top:             env(safe-area-inset-top, 0px);
    --safe-bottom:          env(safe-area-inset-bottom, 0px);
    --safe-left:            env(safe-area-inset-left, 0px);
    --safe-right:           env(safe-area-inset-right, 0px);
}