/* ==========================================================================
   QuizioMatch Redesign 2026 — base layer (tokens + shared primitives)
   Source: design-system/reference/redesign/qm.css ("QuizioMatch Redesign.html",
   defaults: System headlines, 3D buttons).

   Load order: this file is loaded AFTER every legacy stylesheet in index.html
   (see the "QM REDESIGN LAYER" block at the end of <head>), followed by the
   per-area files qm/qm-*.css. It only re-maps the legacy custom properties
   and defines opt-in primitives (.qm-*) — it never touches display,
   visibility, height or overflow of screens/overlays.
   ========================================================================== */

:root,
html[data-theme],
html[data-theme="dark"] {
    /* ── Redesign tokens ─────────────────────────────────────────────── */
    --qm-bg: #0D0A0F;          /* app canvas (burgundy-black)            */
    --qm-s1: #151117;          /* base surface / cards                   */
    --qm-s2: #1D1721;          /* elevated: fields, chips, icon buttons  */
    --qm-s3: #272030;          /* floating / dark buttons / tracks       */
    --qm-pink: #E91E63;
    --qm-pink-l: #FF4081;
    --qm-pink-soft: #FF80AB;
    --qm-pink-pale: #FFCAD9;
    --qm-pink-edge: #8F0E3D;   /* 3D under-edge of pink buttons          */
    --qm-cream: #FFF3F6;
    --qm-cream-edge: #CFA3B3;
    --qm-ink: #1A0E14;         /* text on cream                          */
    --qm-ink-pale: #2A0D19;    /* text on pale pink                      */
    --qm-purple: #9C27B0;
    --qm-violet: #7C4DFF;
    --qm-violet-edge: #4A26B8;
    --qm-green: #4ADE80;
    --qm-red: #FF3B30;
    --qm-red-soft: #FF6B61;
    --qm-fg: #FFFFFF;
    --qm-fg2: rgba(255, 255, 255, .66);
    --qm-fg3: rgba(255, 255, 255, .44);
    --qm-line: rgba(255, 255, 255, .08);
    --qm-dark-edge: #08060A;
    --qm-scrim: rgba(5, 3, 7, .62);

    --qm-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --qm-disp: var(--qm-sans); /* "System" headline default from the redesign */

    /* radii */
    --qm-r-field: 20px;
    --qm-r-card: 28px;
    --qm-r-card-lg: 34px;
    --qm-r-sheet: 36px;
    --qm-r-icon: 16px;
    --qm-r-pill: 999px;

    /* spacing scale (4-pt) */
    --qm-sp-1: 4px;
    --qm-sp-2: 8px;
    --qm-sp-3: 12px;
    --qm-sp-4: 16px;
    --qm-sp-5: 20px;
    --qm-sp-6: 24px;
    --qm-sp-8: 32px;

    /* depth system: base → elevated → floating */
    --qm-shadow-pink-btn: 0 4px 0 var(--qm-pink-edge), 0 12px 28px rgba(233, 30, 99, .32);
    --qm-shadow-pink-btn-press: 0 1px 0 var(--qm-pink-edge), 0 4px 12px rgba(233, 30, 99, .28);
    --qm-shadow-cream-btn: 0 4px 0 var(--qm-cream-edge);
    --qm-shadow-dark-btn: 0 4px 0 var(--qm-dark-edge);
    --qm-shadow-violet-btn: 0 4px 0 var(--qm-violet-edge);
    --qm-shadow-float: 0 16px 40px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
    --qm-shadow-card-lift: 0 20px 50px rgba(0, 0, 0, .5);
    --qm-focus-ring: 0 0 0 3px rgba(255, 128, 171, .55);

    --qm-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --qm-ease-out: cubic-bezier(.22, 1, .36, 1);

    /* ── Legacy custom properties re-mapped to the redesign palette ───── */
    --primary-color: #E91E63;
    --primary-dark: #8F0E3D;
    --primary-light: #FF80AB;
    --secondary-color: #7C4DFF;
    --bg-gradient: #0D0A0F;
    --bg-primary: #0D0A0F;
    --bg-secondary: #151117;
    --bg-tertiary: #1D1721;
    --bg-input: #1D1721;
    --bg-bubble-received: #1D1721;
    --bg-bubble-sent: #E91E63;
    --text-primary: #FFFFFF;
    --text-secondary: rgba(255, 255, 255, .66);
    --text-tertiary: rgba(255, 255, 255, .44);
    --text-muted: rgba(255, 255, 255, .44);
    --border-color: rgba(255, 255, 255, .08);
    --border-light: rgba(255, 255, 255, .12);
    --success-color: #4ADE80;
    --border-radius-sm: 12px;
    --border-radius-md: 20px;
    --border-radius-lg: 28px;
    --border-radius-xl: 36px;
    --avatar-gradient: radial-gradient(120% 90% at 28% 18%, #C2185B 0%, #3A1424 75%);
    --app-bg: #0D0A0F;
    --app-surface: #151117;
    --app-surface-2: #1D1721;
    --app-surface-3: #151117;
    --app-border: rgba(255, 255, 255, .08);
    --app-border-subtle: rgba(255, 255, 255, .06);
    --app-text: #FFFFFF;
    --app-text-secondary: rgba(255, 255, 255, .66);
    --app-text-muted: rgba(255, 255, 255, .44);
    --app-text-faded: rgba(255, 255, 255, .3);
    --app-msg-received: #1D1721;
    --app-nav-active: #E91E63;
    --accent: #E91E63;
    --accent-primary: #E91E63;
    --accent-secondary: #FF80AB;
    --accent-light: rgba(233, 30, 99, .16);
    --accent-glow: rgba(233, 30, 99, .24);
    --status-online: #4ADE80;
}

/* ── Canvas + type ──────────────────────────────────────────────────────── */
html,
body {
    background: var(--qm-bg);
}

body {
    font-family: var(--qm-sans);
    color: var(--qm-fg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Big extra-bold system headline ("disp" in the redesign). */
.qm-disp {
    font-family: var(--qm-disp);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1;
    margin: 0;
    text-wrap: balance;
}
.qm-disp em { font-style: normal; color: var(--qm-pink-soft); }
.qm-h1 { font-size: clamp(38px, 11vw, 46px); }
.qm-h2 { font-size: clamp(28px, 8.4vw, 34px); }
.qm-h3 { font-size: 26px; }
.qm-kick { font: 600 13px/1.3 var(--qm-sans); color: var(--qm-fg2); }
.qm-p { color: var(--qm-fg2); margin: 0; line-height: 1.45; text-wrap: pretty; }
.qm-sm { font-size: 13px; color: var(--qm-fg3); margin: 0; }

/* ── Buttons: pill + 3D under-edge ──────────────────────────────────────── */
.qm-btn {
    height: 56px;
    border: 0;
    border-radius: var(--qm-r-pill);
    font: 700 16px/1 var(--qm-sans);
    letter-spacing: -.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 24px;
    cursor: pointer;
    transition: transform .14s var(--qm-ease-spring), box-shadow .14s var(--qm-ease-out), opacity .14s;
    -webkit-tap-highlight-color: transparent;
}
.qm-btn:hover { transform: translateY(-1px); }
.qm-btn:active { transform: translateY(3px); }
.qm-btn:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
.qm-btn--pink { background: var(--qm-pink); color: #fff; box-shadow: var(--qm-shadow-pink-btn); }
.qm-btn--pink:active { box-shadow: var(--qm-shadow-pink-btn-press); }
.qm-btn--cream { background: var(--qm-cream); color: var(--qm-ink); box-shadow: var(--qm-shadow-cream-btn); }
.qm-btn--dark { background: var(--qm-s3); color: #fff; box-shadow: var(--qm-shadow-dark-btn); }
.qm-btn--violet { background: var(--qm-violet); color: #fff; box-shadow: var(--qm-shadow-violet-btn); }
.qm-btn--ghost { background: transparent; color: var(--qm-fg); height: 48px; font-weight: 600; box-shadow: none; }
.qm-btn--cream:active,
.qm-btn--dark:active,
.qm-btn--violet:active { box-shadow: 0 1px 0 rgba(0, 0, 0, .5); }

/* ── Surfaces ───────────────────────────────────────────────────────────── */
.qm-card { background: var(--qm-s1); border-radius: var(--qm-r-card); padding: 18px; }
.qm-card--s2 { background: var(--qm-s2); }
.qm-card--pale { background: var(--qm-pink-pale); color: var(--qm-ink-pale); }
.qm-card--cream { background: var(--qm-cream); color: var(--qm-ink); }
.qm-card--pink { background: var(--qm-pink); color: #fff; }
.qm-card--violet { background: var(--qm-violet); color: #fff; }

.qm-chip {
    height: 36px;
    padding: 0 14px;
    border-radius: var(--qm-r-pill);
    background: var(--qm-s2);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 600 13px var(--qm-sans);
    color: var(--qm-fg);
    white-space: nowrap;
}
.qm-chip--pk { background: rgba(233, 30, 99, .16); color: var(--qm-pink-soft); }
.qm-chip--on { background: var(--qm-cream); color: var(--qm-ink); }

/* Rotated emoji "sticker" tile. */
.qm-stk {
    display: grid;
    place-items: center;
    border-radius: 30%;
    flex: none;
    line-height: 1;
}

.qm-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--qm-green);
    box-shadow: 0 0 0 3px rgba(74, 222, 128, .18);
    flex: none;
}

/* Fine film grain for large hero surfaces (opt-in). */
.qm-grain {
    position: relative;
    isolation: isolate;
}
.qm-grain::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .06;
    mix-blend-mode: overlay;
    border-radius: inherit;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Global focus visibility (keyboard only) ────────────────────────────── */
:where(button, a, [role="button"], input, select, textarea):focus-visible {
    outline: 2px solid var(--qm-pink-soft);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .qm-btn { transition: none; }
}