/* =============================================================================
   پالت‌ساز — design tokens and the app-wide chrome.

   Rules followed here (docs/UI guide.md):
   - colours come from role-based custom properties, never raw hex in components;
   - spacing is a 4/8 grid and touch targets are at least 44px;
   - light and dark are both first class through prefers-color-scheme;
   - logical CSS properties only, because the whole app is RTL;
   - reduced motion is respected everywhere.
   ========================================================================== */

:root {
    /* Typography scale */
    --font-fa: 'Vazirmatn', 'Segoe UI', Tahoma, system-ui, sans-serif;
    --text-large-title: clamp(1.75rem, 5vw, 2.125rem);
    --text-title1: 1.75rem;
    --text-title2: 1.375rem;
    --text-title3: 1.25rem;
    --text-headline: 1.0625rem;
    --text-body: 1.0625rem;
    --text-callout: 1rem;
    --text-subhead: 0.9375rem;
    --text-footnote: 0.8125rem;
    --text-caption1: 0.75rem;
    --text-caption2: 0.6875rem;

    /* Spacing (4/8 grid) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    /* Radii and touch target */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-full: 999px;
    --tap-min: 44px;

    --page-max: 44rem;

    --motion-swatch: 400ms;

    /* Chrome colours stay neutral while the player answers so nothing biases the
       answers (SPEC §7.1). Light values here, dark in the media query below. */
    --chrome-bg: #f2f2f7;
    --chrome-surface: #ffffff;
    --chrome-surface-raised: #ffffff;
    --chrome-label: #101014;
    --chrome-label-2: rgba(60, 60, 67, 0.6);
    --chrome-label-3: rgba(60, 60, 67, 0.32);
    --chrome-separator: rgba(60, 60, 67, 0.18);
    --chrome-fill: rgba(120, 120, 128, 0.12);
    --chrome-accent: #0a84ff;
    --chrome-danger: #d70015;
    --chrome-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    --chrome-glass: rgba(255, 255, 255, 0.62);

    /* Neutral ink used for scene art until a role becomes confident (SPEC §7.4). */
    --chrome-ink-neutral: #9aa0a6;

    /* The palette roles. Neutral before the reveal; replaced inline by the app. */
    --pw-bg: #f2f2f7;
    --pw-surface: #ffffff;
    --pw-primary: #0a84ff;
    --pw-accent: #ff9500;
    --pw-text: #101014;
    --pw-on-primary: #ffffff;

    /* Scene art ink, resolved from the role variables or from neutral gray. */
    --ink-bg: var(--chrome-ink-neutral);
    --ink-surface: var(--chrome-ink-neutral);
    --ink-primary: var(--chrome-ink-neutral);
    --ink-accent: var(--chrome-ink-neutral);
    --ink-text: var(--chrome-ink-neutral);
}

@media (prefers-color-scheme: dark) {
    :root {
        --chrome-bg: #000000;
        --chrome-surface: #1c1c1e;
        --chrome-surface-raised: #2c2c2e;
        --chrome-label: #ffffff;
        --chrome-label-2: rgba(235, 235, 245, 0.62);
        --chrome-label-3: rgba(235, 235, 245, 0.34);
        --chrome-separator: rgba(84, 84, 88, 0.55);
        --chrome-fill: rgba(120, 120, 128, 0.28);
        --chrome-accent: #0a84ff;
        --chrome-danger: #ff453a;
        --chrome-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
        --chrome-glass: rgba(28, 28, 30, 0.62);
        --chrome-ink-neutral: #6b7075;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-fa);
    font-size: var(--text-body);
    line-height: 1.8;
    color: var(--chrome-label);
    background: var(--chrome-bg);
    /* No letter-spacing anywhere: it breaks Persian letter joins. */
    letter-spacing: normal;
    transition: background-color 400ms ease, color 400ms ease;
}

h1,
h2,
h3,
h4,
p,
figure,
ul,
ol {
    margin: 0;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

a {
    color: var(--chrome-accent);
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

bdi,
.pw-ltr {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Every interactive element is keyboard reachable and visibly focused. */
:focus-visible {
    outline: 3px solid var(--chrome-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.pw-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Scene art ink classes (SPEC §7.4) ------------------------------------
   Art carries only .ink-* classes; each class maps to a role variable that the
   app sets to the live colour when that role is confident, and to neutral gray
   until then. .scene-fill turns a stroke into a filled shape. */

.ink-bg { --ink: var(--ink-bg); }
.ink-surface { --ink: var(--ink-surface); }
.ink-primary { --ink: var(--ink-primary); }
.ink-accent { --ink: var(--ink-accent); }
.ink-text { --ink: var(--ink-text); }

.ink-bg,
.ink-surface,
.ink-primary,
.ink-accent,
.ink-text {
    stroke: var(--ink);
    transition: stroke var(--motion-swatch) ease;
}

.ink-bg.scene-fill,
.ink-surface.scene-fill,
.ink-primary.scene-fill,
.ink-accent.scene-fill,
.ink-text.scene-fill {
    fill: var(--ink);
    stroke: none;
    transition: fill var(--motion-swatch) ease;
}

.scene-art svg {
    display: block;
    width: 100%;
    height: auto;
}

/* ---- Boot screen --------------------------------------------------------- */

.pw-boot {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-6);
    text-align: center;
}

.pw-boot-swatches {
    display: flex;
    gap: var(--space-2);
}

.pw-boot-swatches span {
    width: 28px;
    height: 56px;
    border-radius: var(--radius-full);
    background: currentColor;
    opacity: 0.25;
    animation: pw-boot-pulse 1.4s ease-in-out infinite;
}

.pw-boot-swatches span:nth-child(2) { animation-delay: 120ms; }
.pw-boot-swatches span:nth-child(3) { animation-delay: 240ms; }
.pw-boot-swatches span:nth-child(4) { animation-delay: 360ms; }
.pw-boot-swatches span:nth-child(5) { animation-delay: 480ms; }

@keyframes pw-boot-pulse {
    0%, 100% { opacity: 0.2; transform: scaleY(0.85); }
    50% { opacity: 0.75; transform: scaleY(1); }
}

.pw-boot-title {
    font-size: var(--text-title1);
    font-weight: 700;
}

.pw-boot-subtitle {
    font-size: var(--text-subhead);
    color: var(--chrome-label-2);
}

.pw-boot-lines {
    width: min(20rem, 80vw);
    display: grid;
    gap: var(--space-2);
}

.pw-boot-lines span {
    height: 12px;
    border-radius: var(--radius-sm);
    background: var(--chrome-fill);
}

/* ---- Error UI ------------------------------------------------------------ */

#blazor-error-ui {
    display: none;
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 1000;
    padding: var(--space-4);
    gap: var(--space-4);
    align-items: center;
    background: var(--chrome-surface-raised);
    box-shadow: var(--chrome-shadow);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    font-size: var(--text-body);
}

#blazor-error-ui .reload {
    font-weight: 600;
}

/* ---- Reduced motion ------------------------------------------------------ */

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