/*
 * Flying Eggs — Design System
 * Colors, typography, and semantic tokens
 *
 * Source of truth: docs/old/design/design_system/colors_and_type.css
 * Extracted from the Figma table artboard (iPhone 13/14 landscape, 844×390).
 *
 * Tokens scoped to :root so any HTML consumer can read them.
 * Fonts are bundled locally in wwwroot/fonts/ for offline support (MAUI).
 */

/* ================================================================== */
/* FONTS — bundled locally for offline support                         */
/* ================================================================== */

/* Protest Strike — display font (single weight, latin + latin-ext) */
@font-face {
    font-family: 'Protest Strike';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/protest-strike-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Protest Strike';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/protest-strike-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Ubuntu 400 (Regular) */
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ubuntu-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ubuntu-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Ubuntu 500 (Medium) */
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ubuntu-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ubuntu-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Ubuntu 700 (Bold) */
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/ubuntu-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/ubuntu-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* ================================================================== */
    /* BASE TOKENS — raw Figma design tokens                               */
    /* ================================================================== */

    /* ---------- Card face palette ---------- */
    --te-card-face-start:   #F6F6F5;
    --te-card-face-end:     #FFFFFF;
    --te-card-face-muted-1: #A8A8A8;
    --te-card-face-muted-2: #C4C4C4;
    --te-card-border:       rgba(42, 42, 42, 0.5);

    /* ---------- Suit colors ---------- */
    --te-suit-red:          #BA0A0A;
    --te-suit-black:        #000000;
    --te-suit-wild:         #FFD700;   /* heart wildcards + level-card border */

    /* ---------- Table surface ---------- */
    --te-table-green-1:     #1e7a3a;   /* table felt — bright center */
    --te-table-green-2:     #145a28;   /* mid falloff */
    --te-table-green-3:     #0d3d1a;   /* dark edge vignette */
    --te-table-panel-dark:  #1e3a2a;   /* overlay panel fill */
    --te-table-panel-edge:  #3a5a4a;   /* overlay panel border */

    /* ---------- Surface overlays ---------- */
    --te-panel-bg:          rgba(0, 0, 0, 0.37);
    --te-panel-bg-strong:   rgba(0, 0, 0, 0.88);
    --te-panel-border:      #030404;
    --te-scrim:             rgba(0, 0, 0, 0.70);
    --te-avatar-border:     rgba(87, 85, 85, 0.9);

    /* ---------- Accent / state ---------- */
    --te-accent-gold:       #FFD700;      /* turn highlight, combos, titles */
    --te-accent-gold-glow:  rgba(246, 168, 6, 0.98);
    --te-accent-amber:      #FFD36B;      /* warning banner text */
    --te-accent-red:        #E74C3C;      /* errors, invalid, start button */
    --te-accent-green:      #4CAF50;      /* play button, beats-winner */
    --te-accent-green-deep: #2E7D32;      /* menu buttons */
    --te-accent-blue:       #2196F3;      /* continue button */
    --te-accent-slate:      #607D8B;      /* secondary buttons */
    --te-accent-grey:       #78909C;      /* pass button, tools */

    /* ---------- Team colors ---------- */
    --te-team-a:            #7EC8E3;      /* cool blue */
    --te-team-b:            #E8A87C;      /* warm coral */

    /* ---------- Text on dark (table) ---------- */
    --te-fg-strong:         #FFFFFF;
    --te-fg-body:           #E0E0E0;
    --te-fg-muted:          #CCCCCC;
    --te-fg-quiet:          #BBBBBB;
    --te-fg-disabled:       #888888;
    --te-fg-very-quiet:     #666666;

    /* ---------- Action button gradients (Figma pill buttons) ---------- */
    --te-btn-warm-start:    #FFFF93;
    --te-btn-warm-end:      #FFA444;
    --te-btn-mono-start:    #FFFFF8;
    --te-btn-mono-end:      #242323;
    --te-btn-cool-start:    #9DF8FA;
    --te-btn-cool-end:      #7669FF;

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

    --te-card-face-gradient-muted:
        linear-gradient(270.51deg,
            var(--te-card-face-muted-1) 0.44%,
            var(--te-card-face-muted-2) 99.56%);

    --te-table-felt:
        radial-gradient(ellipse at center,
            var(--te-table-green-1) 0%,
            var(--te-table-green-2) 60%,
            var(--te-table-green-3) 100%);

    --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-inset: inset 3px 3px 3px rgba(0, 0, 0, 0.18);
    --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-shadow-text:      0 2px 8px rgba(0, 0, 0, 0.4);
    --te-glow-active-turn: 0 0 8px rgba(246, 168, 6, 0.4);
    --te-glow-card-hover:  0 2px 8px rgba(255, 255, 255, 0.25);

    /* ---------- Radii ---------- */
    --te-radius-xs:    4px;  /* cards */
    --te-radius-sm:    5px;
    --te-radius-md:    8px;  /* settings inputs, banners */
    --te-radius-lg:   12px;  /* pills, panels */
    --te-radius-xl:   20px;  /* action buttons */
    --te-radius-pill: 25px;

    /* ---------- Spacing scale ---------- */
    --te-space-1:  2px;
    --te-space-2:  4px;
    --te-space-3:  6px;
    --te-space-4:  8px;
    --te-space-5: 12px;
    --te-space-6: 16px;
    --te-space-7: 20px;
    --te-space-8: 24px;
    --te-space-9: 32px;
    --te-space-10: 48px;

    /* ================================================================== */
    /* 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-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --te-font-weight-regular: 400;
    --te-font-weight-medium:  500;
    --te-font-weight-bold:    700;
    --te-font-weight-heavy:   800;

    /* Figma raw type sizes (844×390 artboard). Apps should scale via
       clamp()/rem — these are reference values. */
    --te-text-micro:  6px;
    --te-text-xs:     8px;
    --te-text-sm:     9px;
    --te-text-base:  10px;
    --te-text-md:    14px;
    --te-text-lg:    18px;
    --te-text-xl:    24px;
    --te-text-2xl:   32px;
    --te-text-3xl:   48px;

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

    --te-line-height-tight: 1.15;
    --te-line-height-body:  1.5;
    --te-line-height-loose: 1.6;

    /* ================================================================== */
    /* COMPONENT REFERENCE SIZES                                           */
    /* ================================================================== */

    /* Width/height are original Figma source dimensions (58×77).
       --te-card-aspect reflects the live ratio used by game.css (50/70). */
    --te-card-width:       58px;
    --te-card-height:      77px;
    --te-card-aspect:      50 / 70;

    --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-btn-min-tap: 48px;  /* WCAG touch target */

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

    /* ================================================================== */
    /* SEMANTIC TOKENS — use these in components                           */
    /* ================================================================== */

    --color-bg-table:      var(--te-table-felt);
    --color-bg-panel:      var(--te-panel-bg);
    --color-bg-overlay:    var(--te-table-panel-dark);
    --color-bg-scrim:      var(--te-scrim);

    --color-fg:            var(--te-fg-body);
    --color-fg-strong:     var(--te-fg-strong);
    --color-fg-muted:      var(--te-fg-muted);
    --color-fg-quiet:      var(--te-fg-quiet);
    --color-fg-disabled:   var(--te-fg-disabled);
    --color-fg-accent:     var(--te-accent-gold);

    --color-border:        var(--te-table-panel-edge);
    --color-border-strong: var(--te-panel-border);

    --color-success:       var(--te-accent-green);
    --color-danger:        var(--te-accent-red);
    --color-warning:       var(--te-accent-amber);
    --color-info:          var(--te-accent-blue);

    --color-red:           var(--te-suit-red);
    --color-black:         var(--te-suit-black);
    --color-wild:          var(--te-suit-wild);

    /* Semantic type roles (size/family/weight bundled).
       Use as shorthand: `font: var(--type-display);` */
    --type-display: var(--te-font-weight-heavy) clamp(2rem, 6vw, 4rem) / 1.1 var(--te-font-display);
    --type-h1:      var(--te-font-weight-bold) clamp(1.6rem, 5vw, 3rem) / 1.15 var(--te-font-display);
    --type-h2:      var(--te-font-weight-bold) 1.4rem / 1.2 var(--te-font-body);
    --type-h3:      var(--te-font-weight-bold) 1.1rem / 1.25 var(--te-font-body);
    --type-body:    var(--te-font-weight-regular) 0.95rem / 1.5 var(--te-font-body);
    --type-small:   var(--te-font-weight-regular) 0.85rem / 1.4 var(--te-font-body);
    --type-caption: var(--te-font-weight-regular) 0.75rem / 1.3 var(--te-font-body);
    --type-button:  var(--te-font-weight-bold) 0.9rem / 1 var(--te-font-body);
    --type-card:    var(--te-font-weight-bold) 1rem / 1 var(--te-font-body);
}

/* ================================================================== */
/* BASE RESET — opt-in helpers                                         */
/* ================================================================== */

.te-reset *,
.te-reset *::before,
.te-reset *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.te-reset {
    font-family: var(--te-font-body);
    color: var(--color-fg);
    background: var(--color-bg-table);
}

.te-selectable {
    user-select: text;
    -webkit-user-select: text;
}

/* ================================================================== */
/* ROLE CLASSES — shorthand for the semantic type roles                */
/* ================================================================== */

.te-display { font: var(--type-display); color: var(--color-fg-accent); text-shadow: var(--te-shadow-text); }
.te-h1      { font: var(--type-h1);      color: var(--color-fg-accent); text-shadow: var(--te-shadow-text); }
.te-h2      { font: var(--type-h2);      color: var(--color-fg-accent); }
.te-h3      { font: var(--type-h3);      color: var(--color-fg-muted); }
.te-body    { font: var(--type-body);    color: var(--color-fg); }
.te-small   { font: var(--type-small);   color: var(--color-fg-muted); }
.te-caption { font: var(--type-caption); color: var(--color-fg-disabled); }