/* ============================================================
   RTT.UI — Design System (rtt-theme.css)
   Ported from REYSTI.Web\wwwroot\app.css design tokens and
   adapted for touch-first kiosk use (larger tap targets).
   Served from _content/RTT.UI/css/rtt-theme.css
   NO CDN references — all assets bundled locally.
   ============================================================ */

/* ============================================================
   FONTS (bundled locally in _content/RTT.UI/fonts/)
   ============================================================ */
/* 2026-11-13 (Marc: "no old design of the legacy app anywhere, everything as modern as the new website"):
   the two LEGACY family names used by hundreds of ported pages ('cascadiacode' body text, 'adlib' display) now
   resolve to the website faces, so every legacy page switches typeface at once without editing it:
   'cascadiacode' -> Sora (body), 'adlib' -> Bricolage Grotesque (display). The old files stay on disk unused.
   was:
   @font-face { font-family: 'cascadiacode'; src: url('../fonts/cascadia_code.eot'); src: ... cascadia_code.woff2 ...; font-display: swap; }
   @font-face { font-family: 'adlib'; src: url('../fonts/adlib.eot'); src: ... adlib.woff2 ...; font-display: swap; } */
@font-face {
    font-family: 'cascadiacode';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('../fonts/sora-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: 'cascadiacode';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('../fonts/sora-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;
}

@font-face {
    font-family: 'adlib';
    font-style: normal;
    font-weight: 500 800;
    font-stretch: 75% 100%;
    font-display: swap;
    src: url('../fonts/bricolage-display.woff2') format('woff2');
}

/* the website's display + ticket faces (OFL, self-hosted, same files as REYSTI.Web/wwwroot/fonts) */
@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 500 800;
    font-stretch: 75% 100%;
    font-display: swap;
    src: url('../fonts/bricolage-display.woff2') format('woff2');
}

@font-face {
    font-family: 'Martian Mono';
    font-style: normal;
    font-weight: 300 700;
    font-stretch: 75% 112.5%;
    font-display: swap;
    src: url('../fonts/martian-mono.woff2') format('woff2');
}

/* 2026-11-13: Sora (OFL), the REYSTI.Web body face, same files and ranges as REYSTI.Web/wwwroot/app.css */
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('../fonts/sora-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: 'Sora';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('../fonts/sora-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;
}

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
    /* Primary — Blue (REYSTI brand) */
    --rtt-primary: #84baf8;
    --rtt-primary-dark: #5a9ae0;
    --rtt-primary-light: #a8d0fa;
    --rtt-primary-rgb: 132, 186, 248;

    /* Secondary — Purple (accent) */
    --rtt-secondary: #aa8cf5;
    --rtt-secondary-light: #c4b0fa;
    --rtt-secondary-rgb: 170, 140, 245;

    /* Accent — Emerald Green (success, "go") */
    --rtt-accent: #10b981;
    --rtt-accent-light: #34d399;
    --rtt-accent-rgb: 16, 185, 129;

    /* Semantic */
    --rtt-success: #10b981;
    --rtt-warning: #84baf8;
    --rtt-error: #ef4444;
    --rtt-error-light: rgba(239, 68, 68, 0.15);
    --rtt-info: #3b82f6;

    /* Backgrounds */
    --rtt-bg: #0a0a14;
    --rtt-bg-secondary: #0d0d1a;
    --rtt-bg-tertiary: #111120;
    --rtt-bg-elevated: #14142a;
    --rtt-bg-overlay: rgba(0, 0, 0, 0.6);

    /* Surfaces */
    --rtt-surface-card: rgba(255, 255, 255, 0.03);
    --rtt-surface-card-hover: rgba(255, 255, 255, 0.06);
    --rtt-surface-input: #121222;
    --rtt-surface-highlight: rgba(132, 186, 248, 0.08);

    /* Text */
    --rtt-text: #f0f0f5;
    --rtt-text-secondary: rgba(255, 255, 255, 0.6);
    --rtt-text-muted: rgba(255, 255, 255, 0.35);
    /* 2026-11-13: dark ink like the website (white on #84baf8 is 2.1:1, unreadable). was: --rtt-text-on-primary: #ffffff; */
    --rtt-text-on-primary: #0a0a14;
    --rtt-text-link: #84baf8;
    --rtt-text-link-hover: #a8d0fa;

    /* Borders */
    --rtt-border: rgba(255, 255, 255, 0.08);
    --rtt-border-light: rgba(255, 255, 255, 0.04);
    --rtt-border-focus: #84baf8;
    --rtt-border-error: #ef4444;

    /* Shadows */
    --rtt-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --rtt-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --rtt-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
    --rtt-shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.6);
    --rtt-shadow-glow: 0 0 30px rgba(132, 186, 248, 0.2);
    --rtt-shadow-glow-lg: 0 0 60px rgba(132, 186, 248, 0.3);

    /* Gradients */
    --rtt-gradient-primary: linear-gradient(135deg, #84baf8 0%, #5a9ae0 100%);
    --rtt-gradient-accent: linear-gradient(135deg, #84baf8 0%, #5a9ae0 50%, #10b981 100%);
    --rtt-gradient-hero: linear-gradient(180deg, #0a0a14 0%, #0d0d1a 100%);
    --rtt-gradient-card: linear-gradient(135deg, rgba(132, 186, 248, 0.04) 0%, rgba(170, 140, 245, 0.04) 100%);

    /* Spacing scale */
    --rtt-space-xs: 0.25rem;
    --rtt-space-sm: 0.5rem;
    --rtt-space-md: 1rem;
    --rtt-space-lg: 1.5rem;
    --rtt-space-xl: 2rem;
    --rtt-space-2xl: 3rem;
    --rtt-space-3xl: 4rem;
    --rtt-space-4xl: 6rem;

    /* Border radius scale */
    --rtt-radius-sm: 0.375rem;
    --rtt-radius-md: 0.5rem;
    --rtt-radius-lg: 0.75rem;
    --rtt-radius-xl: 1rem;
    --rtt-radius-2xl: 1.5rem;
    --rtt-radius-full: 9999px;

    /* Typography. 2026-11-13: Sora (OFL) is now bundled (fonts/sora-latin*.woff2, same files as REYSTI.Web,
       @font-face at the top of this file). NO CDN loading allowed.
       was: TODO: Sora is not bundled locally (no license-cleared font file in repo); stack falls back to Segoe UI / system-ui. */
    --rtt-font-family: 'Sora', 'Segoe UI', system-ui, sans-serif;
    /* 2026-11-13: the website faces. was: --rtt-font-mono: 'cascadiacode', ...; --rtt-font-display: 'adlib', 'Sora', ... */
    --rtt-font-mono: 'Martian Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
    --rtt-font-display: 'Bricolage Grotesque', 'Sora', 'Segoe UI', system-ui, sans-serif;

    /* 2026-11-13 website vocabulary (REYSTI.Web app.css): the logo's colors, thermal-paper tickets, ticket rail */
    --rtt-brand-amber: #ffc23d;
    --rtt-brand-coral: #ff6b4a;
    --rtt-brand-magenta: #e5318c;
    --rtt-brand-violet: #7a45f5;
    --rtt-brand-violet-light: #a07bff;
    --rtt-brand-pixel: #3cc2fc;
    --rtt-brand-magenta-rgb: 229, 49, 140;
    --rtt-gradient-brand: linear-gradient(100deg, var(--rtt-brand-amber) 0%, var(--rtt-brand-coral) 30%, var(--rtt-brand-magenta) 62%, var(--rtt-brand-violet-light) 100%);
    --rtt-paper: #f6f4ee;
    --rtt-paper-shade: #e8e5dc;
    --rtt-paper-input: #fffdf8;      /* a field printed on the paper ticket */

    /* 2026-11-13: targets of the legacy-literal rewrite in the ported pages (black glass panels -> night glass,
       thick blue 4px / 2px frames -> the website's hairline) */
    --rtt-surface-panel: rgba(13, 13, 26, 0.86);
    --rtt-border-strong: rgba(255, 255, 255, 0.14);
    --rtt-border-accent: rgba(132, 186, 248, 0.55);   /* legacy thick blue frames (often = selected) -> thin blue */
    --rtt-ink: #15141d;
    --rtt-ink-soft: rgba(21, 20, 29, 0.6);
    --rtt-ink-faint: rgba(21, 20, 29, 0.25);
    --rtt-metal-hi: #4a4a5c;
    --rtt-metal-mid: #262634;
    --rtt-metal-lo: #14141c;
    --rtt-focus-ring: var(--rtt-brand-pixel);

    /* app ground: replaces the legacy photo backgrounds (RTT_Bkg.jpg brain, BkgTha...) wherever no venue picture is set */
    --rtt-app-bg-image: radial-gradient(70vmax 50vmax at 12% -12%, rgba(var(--rtt-primary-rgb), 0.13), transparent 62%),
                        radial-gradient(60vmax 45vmax at 105% 112%, rgba(var(--rtt-secondary-rgb), 0.12), transparent 60%);
    --rtt-font-size-xs: 0.75rem;
    --rtt-font-size-sm: 0.875rem;
    --rtt-font-size-base: 1rem;
    --rtt-font-size-lg: 1.125rem;
    --rtt-font-size-xl: 1.25rem;
    --rtt-font-size-2xl: 1.5rem;
    --rtt-font-size-3xl: 1.875rem;
    --rtt-font-size-4xl: 2.25rem;
    --rtt-font-size-5xl: 3rem;
    --rtt-font-size-6xl: 3.75rem;

    /* Line heights */
    --rtt-line-height-tight: 1.25;
    --rtt-line-height-normal: 1.5;
    --rtt-line-height-relaxed: 1.75;

    /* Font weights */
    --rtt-font-weight-normal: 400;
    --rtt-font-weight-medium: 500;
    --rtt-font-weight-semibold: 600;
    --rtt-font-weight-bold: 700;
    --rtt-font-weight-extrabold: 800;

    /* Transitions */
    --rtt-transition-fast: 150ms ease;
    --rtt-transition-normal: 250ms ease;
    --rtt-transition-slow: 350ms ease;

    /* Z-index */
    --rtt-z-dropdown: 100;
    --rtt-z-sticky: 200;
    --rtt-z-fixed: 300;
    --rtt-z-modal: 500;

    /* Touch-first kiosk sizing */
    --rtt-touch-target: 48px;      /* minimum recommended tap target */
    --rtt-touch-target-lg: 64px;   /* large kiosk buttons */

    /* ============================================================
       LEGACY BRIDGE VARS — ported inline styles use --color_a..d.
       Mapped onto the new tokens (CRITICAL: do not remove).
       Historical mapping: a=brand blue, b=black/bg, c=white/text, d=purple.
       CLASSIC-UI fidelity (2026-07-07): b/c must keep the EXACT original
       site.css :root values (black / white) — this file loads after site.css
       and was overriding them with the modern tokens (#0a0a14 / #f0f0f5),
       which shifted every classic page using var(--color_b/c).
       Modern UI does not read --color_* (it uses --km-* / --rtt-* vars).
       ============================================================ */
    --color_a: var(--rtt-primary);        /* #84baf8 — same value as original site.css */
    /* 2026-11-13 (Marc: no legacy look anywhere): the classic black / white are retired, the legacy pages now sit on
       the website palette. was: --color_b: black; --color_c: white; (CLASSIC-UI fidelity, 2026-07-07) */
    --color_b: var(--rtt-bg);
    --color_c: var(--rtt-text);
    --color_d: var(--rtt-secondary);      /* #aa8cf5 — same value as original site.css */
}

/* ============================================================
   2026-11-13 MODERN BASE for every page (the legacy pages included): the website's ground, face, focus ring
   and selection. Pages keep their own layout; only the look changes.
   ============================================================ */
html, body {
    background-color: var(--rtt-bg);
    color: var(--rtt-text);
    font-family: var(--rtt-font-family);
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: rgba(var(--rtt-primary-rgb), 0.35);
    color: var(--rtt-text);
}

:focus-visible {
    outline: 2px solid var(--rtt-focus-ring);
    outline-offset: 3px;
}

h1, h2, h3, .k-window-title, .k-dialog-title {
    font-family: var(--rtt-font-display);
    letter-spacing: -0.01em;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   BASE CLASSES — touch-first kiosk adaptations
   ============================================================ */

/* Buttons */
.rtt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rtt-space-sm);
    min-height: var(--rtt-touch-target);
    min-width: var(--rtt-touch-target);
    padding: var(--rtt-space-md) var(--rtt-space-xl);
    font-family: var(--rtt-font-family);
    font-size: var(--rtt-font-size-lg);
    font-weight: var(--rtt-font-weight-semibold);
    line-height: 1;
    border: none;
    border-radius: var(--rtt-radius-lg);
    cursor: pointer;
    transition: all var(--rtt-transition-normal);
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.rtt-btn-primary {
    background: var(--rtt-gradient-primary);
    color: var(--rtt-text-on-primary);
    box-shadow: var(--rtt-shadow-md), var(--rtt-shadow-glow);
}

.rtt-btn-primary:hover,
.rtt-btn-primary:active {
    box-shadow: var(--rtt-shadow-lg), var(--rtt-shadow-glow-lg);
    color: var(--rtt-text-on-primary);
}

.rtt-btn-secondary {
    background: rgba(255, 255, 255, 0.04);
    color: var(--rtt-text);
    border: 1.5px solid var(--rtt-border);
}

.rtt-btn-secondary:hover,
.rtt-btn-secondary:active {
    border-color: var(--rtt-primary);
    background: var(--rtt-surface-highlight);
    color: var(--rtt-primary);
}

.rtt-btn-accent {
    background: var(--rtt-accent);
    color: var(--rtt-text-on-primary);
}

.rtt-btn-lg {
    min-height: var(--rtt-touch-target-lg);
    padding: var(--rtt-space-lg) var(--rtt-space-2xl);
    font-size: var(--rtt-font-size-xl);
    border-radius: var(--rtt-radius-xl);
}

.rtt-btn-sm {
    min-height: var(--rtt-touch-target); /* never below touch minimum on kiosk */
    padding: var(--rtt-space-sm) var(--rtt-space-md);
    font-size: var(--rtt-font-size-base);
    border-radius: var(--rtt-radius-md);
}

/* Pressed feedback for kiosk (no hover on touch) */
.rtt-btn:active {
    transform: scale(0.97);
}

/* Cards */
.rtt-card {
    background: var(--rtt-surface-card);
    border: 1px solid var(--rtt-border);
    border-radius: var(--rtt-radius-xl);
    padding: var(--rtt-space-xl);
    transition: all var(--rtt-transition-normal);
    position: relative;
    overflow: hidden;
    min-width: 0;
    color: var(--rtt-text);
}

.rtt-card:hover {
    box-shadow: var(--rtt-shadow-lg), 0 0 40px rgba(132, 186, 248, 0.05);
    border-color: rgba(132, 186, 248, 0.15);
}

.rtt-card-elevated {
    background: var(--rtt-bg-elevated);
    box-shadow: var(--rtt-shadow-md);
}

/* Form inputs */
.rtt-input,
.rtt-textarea,
.rtt-select {
    width: 100%;
    min-height: var(--rtt-touch-target);
    padding: var(--rtt-space-md);
    background: var(--rtt-surface-input);
    border: 1px solid var(--rtt-border);
    border-radius: var(--rtt-radius-lg);
    color: var(--rtt-text);
    font-family: var(--rtt-font-family);
    font-size: var(--rtt-font-size-lg); /* larger for kiosk readability */
    transition: border-color var(--rtt-transition-fast), box-shadow var(--rtt-transition-fast);
}

.rtt-input:focus,
.rtt-textarea:focus,
.rtt-select:focus {
    outline: none;
    border-color: var(--rtt-primary);
    box-shadow: 0 0 0 3px rgba(132, 186, 248, 0.15);
}

.rtt-textarea {
    min-height: 120px;
    resize: vertical;
}

.rtt-label {
    display: block;
    font-size: var(--rtt-font-size-base);
    font-weight: var(--rtt-font-weight-medium);
    color: var(--rtt-text);
    margin-bottom: var(--rtt-space-sm);
}

/* Utility */
.rtt-text-gradient {
    background: var(--rtt-gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.rtt-glow {
    box-shadow: var(--rtt-shadow-glow);
}