/*
 * Design tokens — the single source of truth for color, type, spacing and depth.
 * Components, shell and feature styles must reference these variables instead of raw values.
 * See apps/client/DESIGN.md for usage rules.
 */
:root {
    color-scheme: dark;

    /* Surfaces: page → panel → raised card → interactive hover.
     * Adjacent steps keep a ≥1.10 luminance ratio so nested panels/cards stay distinguishable. */
    --color-bg-deep: #080a0e;
    --color-bg: #0c0f14;
    --color-surface-1: #161a22;
    --color-surface-2: #1f242e;
    --color-surface-3: #29303b;
    --color-surface-4: #343c49;
    --color-backdrop: rgba(4, 6, 9, 0.74);
    --color-spotlight-dim: rgba(4, 6, 9, 0.64); /* guide mask around the element to click next */

    /* Lines (line-1 stays visible on surface-2 cards; line-2 marks control edges) */
    --color-line-1: #303845;
    --color-line-2: #434c5b;
    --color-line-3: #5a6576;

    /* Controls: enabled buttons sit clearly above card surfaces; disabled ones drop their fill (see button.css). */
    --color-control: #394252;
    --color-control-hover: #455063;
    --color-control-line: #5f6b7d;
    --shadow-control: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    --color-text-on-tone: #fbf8f2; /* text on solid tone (content/claim/buy) buttons */

    /* Text (text-3 meets 4.5:1 up to surface-3) */
    --color-text-1: #f1ece2;
    --color-text-2: #bfc3cb;
    --color-text-3: #979da8;
    --color-text-disabled: #6d737e;
    --color-text-inverse: #17120a;

    /* Brand accent: aged gold. Used for primary actions, focus and selection only. */
    --color-gold-1: #ecd08f;
    --color-gold-2: #c9a15a;
    --color-gold-3: #a07d3f;
    --color-gold-4: #6d5428;
    --color-gold-line: rgba(201, 161, 90, 0.36);
    --color-gold-soft: rgba(201, 161, 90, 0.12);
    --color-gold-faint: rgba(201, 161, 90, 0.06);
    --color-gold-line-strong: rgba(201, 161, 90, 0.55);
    --color-gold-glow: rgba(236, 208, 143, 0.55); /* light emitted by a lit gold edge or key */
    --color-gold-halo: rgba(201, 161, 90, 0.14); /* wide halo of a panel that must stand out over the game */

    /* Feedback */
    --color-danger: #e0685c;
    --color-danger-strong: #ec7d71;
    --color-danger-soft: rgba(224, 104, 92, 0.14);
    --color-success: #6fbd82;
    --color-success-soft: rgba(111, 189, 130, 0.14);
    --color-warning: #e2aa48;
    --color-warning-soft: rgba(226, 170, 72, 0.14);
    --color-info: #72a6de;
    --color-info-soft: rgba(114, 166, 222, 0.14);
    --color-danger-line: rgba(224, 104, 92, 0.45);
    --color-success-line: rgba(111, 189, 130, 0.4);
    --color-warning-line: rgba(226, 170, 72, 0.42);
    --color-info-line: rgba(114, 166, 222, 0.4);
    --color-success-halo: rgba(111, 189, 130, 0.2);
    --color-danger-halo: rgba(224, 104, 92, 0.18);

    /* Content modes: identity colors for each playable content. Use as thin accents, never as panel fills. */
    --mode-raid: #cf5a4b;
    --mode-rift: #5f95db;
    --mode-hell: #d9803f;
    --mode-narak: #9674d6;
    --mode-hourglass: #c9a15a;
    --mode-square: #5fb3a4;

    /* Item grades */
    --grade-common: #a3a8b0;
    --grade-uncommon: #86b64d;
    --grade-rare: #4c9de2;
    --grade-epic: #a86ae2;
    --grade-legendary: #eaa53b;
    --grade-relic: #e2692f;
    --grade-ancient: #dccb9b;
    --grade-esther: #3ec6bb;

    /* Ark Grid star chart art: night sky, order (ember) and chaos (azure) cores, engraved metal. */
    --ark-void: #04050d;
    --ark-deep: #0a0a20;
    --ark-nebula-1: #2b1b72;
    --ark-nebula-2: #5c2c9f;
    --ark-nebula-3: #1a3b8c;
    --ark-glow: #cdb2ff;
    --ark-glow-soft: rgba(205, 178, 255, 0.34);
    --ark-line: #8f7cd8;
    --ark-line-faint: rgba(143, 124, 216, 0.3);
    --ark-order-1: #ffb48a;
    --ark-order-2: #c9382a;
    --ark-order-3: #3c0b12;
    --ark-chaos-1: #9fdcff;
    --ark-chaos-2: #2463d4;
    --ark-chaos-3: #07173f;
    --ark-metal-1: #f5e4b4;
    --ark-metal-2: #a88443;
    --ark-metal-3: #3b2c13;
    --ark-panel: rgba(7, 7, 19, 0.82);
    --ark-panel-raised: rgba(22, 20, 48, 0.86);
    --ark-panel-line: rgba(160, 142, 232, 0.3);

    /* Difficulty tones (badges, labels). Keys match resolveDungeonTheme()/difficulty keys. */
    --tone-easy: var(--color-success);
    --tone-normal: var(--color-text-2);
    --tone-hard: var(--color-danger-strong);
    --tone-nightmare: var(--grade-epic);
    --tone-apocalypse: var(--grade-legendary);
    --tone-endgame: var(--grade-esther);
    --tone-impossible: var(--grade-relic);

    /* Boss HP bar: line colors cycle by the remaining line count (n % 5); the last line is red. */
    --boss-hp-line-0: #e59a2f;
    --boss-hp-line-1: #8360d6;
    --boss-hp-line-2: #2fae98;
    --boss-hp-line-3: #c0509f;
    --boss-hp-line-4: #4a8fe0;
    --boss-hp-line-last: #e5483c;
    --boss-hp-plate: rgba(10, 12, 16, 0.86);
    --boss-hp-rim: rgba(255, 255, 255, 0.12);
    --boss-hp-trail: rgba(255, 248, 235, 0.86);
    --boss-hp-under-shade: rgba(0, 0, 0, 0.32);
    --boss-hp-edge: rgba(255, 255, 255, 0.85);
    --boss-hp-dim: rgba(6, 8, 12, 0.58);
    --boss-hp-bevel: inset 0 2px 0 rgba(255, 255, 255, 0.28), inset 0 -3px 0 rgba(0, 0, 0, 0.22);
    --boss-hp-text-shadow: 0 0 2px #000, 0 1px 2px #000, 1px 0 0 rgba(0, 0, 0, 0.7), -1px 0 0 rgba(0, 0, 0, 0.7);

    /* Typography */
    --font-sans: 'Pretendard Variable', Pretendard, 'Noto Sans KR', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Cinzel', 'Pretendard Variable', Pretendard, serif;
    --font-mono: 'JetBrains Mono', Consolas, 'Roboto Mono', monospace;
    --text-2xs: 12px;
    --text-xs: 13px;
    --text-sm: 15px;
    --text-md: 16px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 22px;
    --text-2xl: 24px;
    --text-3xl: 28px;
    --text-control-sm: 14px;
    --text-panel-title: 20px;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --leading-tight: 1.2;
    --leading-normal: 1.45;
    --tracking-caps: 0.08em;

    /* Spacing (4px scale) */
    --space-0-5: 2px;
    --space-1: 4px;
    --space-1-5: 6px;
    --space-2: 8px;
    --space-2-5: 10px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;

    /* Radius */
    --radius-xs: 3px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-pill: 999px;

    /* Depth */
    --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.38);
    --shadow-3: 0 18px 48px rgba(0, 0, 0, 0.52);
    --shadow-focus: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-gold-2);
    --shadow-text-over-game: 0 2px 8px rgba(0, 0, 0, 0.6);

    /* Lit plate: a framed panel over the fight (training coach) — warm haze, gold rim, deep drop shadow. */
    --plate-bg:
        radial-gradient(120% 55% at 0% 0%, rgba(201, 161, 90, 0.16), transparent 62%),
        linear-gradient(180deg, rgba(31, 28, 23, 0.97), rgba(15, 17, 23, 0.97));
    --plate-shadow:
        inset 0 1px 0 rgba(255, 236, 190, 0.12),
        inset 0 0 0 1px rgba(236, 208, 143, 0.05),
        0 0 0 1px rgba(0, 0, 0, 0.55),
        0 24px 60px rgba(0, 0, 0, 0.6);
    --plate-keycap-bg: linear-gradient(180deg, #3d3a33, #25252a);
    --plate-keycap-shadow: inset 0 1px 0 rgba(255, 236, 190, 0.18), 0 0 18px rgba(201, 161, 90, 0.25);

    /* Announcements (zone title card, notice ribbons, centre messages): engraved gold type on an ink band
     * over the map, ornaments baked in assets/ui/announce/. See DESIGN.md "Announcements". */
    --font-title: 'Noto Serif KR', 'Nanum Myeongjo', 'Batang', serif;
    --announce-gold-fill: linear-gradient(180deg, #fffaf0 0%, #fbe8b8 20%, #ecc576 42%, #a8742a 51%, #d6a24f 60%, #f4d791 82%, #fff3d0 100%);
    --announce-gold-edge: rgba(34, 17, 4, 0.94);
    --announce-cream: #f6ecd6;
    --announce-shadow: 0 2px 4px rgba(0, 0, 0, 0.85), 0 0 14px rgba(0, 0, 0, 0.6);
    --announce-ink: rgba(6, 8, 12, 0.8);
    --announce-ink-band: linear-gradient(90deg, transparent, var(--announce-ink) 16%, var(--announce-ink) 84%, transparent);
    --announce-rare-glow: radial-gradient(55% 140% at 50% 0%, rgba(255, 196, 96, 0.34), transparent 72%);
    --announce-ink-band-soft: linear-gradient(90deg, transparent, rgba(6, 8, 12, 0.56) 18%, rgba(6, 8, 12, 0.56) 82%, transparent);
    --announce-lane-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    --announce-veil: radial-gradient(50% 50% at 50% 50%, rgba(4, 6, 10, 0.74), rgba(4, 6, 10, 0.5) 46%, transparent 74%);
    --announce-hairline: linear-gradient(90deg, transparent, rgba(201, 161, 90, 0.7) 18%, rgba(255, 236, 190, 0.95) 50%, rgba(201, 161, 90, 0.7) 82%, transparent);
    --announce-sheen: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.9) 50%, transparent 62%);

    /* System notices (square chat 알림: joins and achievements, the achievement band): one sky blue (user, 2026-10-08). */
    --color-notice-sky: #8ed2ff;
    --color-notice-sky-strong: #c4e8ff;
    --announce-hairline-sky: linear-gradient(90deg, transparent, rgba(96, 182, 255, 0.72) 18%, rgba(206, 236, 255, 0.95) 50%, rgba(96, 182, 255, 0.72) 82%, transparent);

    /* Control sizing */
    --control-h-sm: 34px;
    --control-h-md: 42px;
    --control-h-lg: 52px;

    /* Motion */
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast: 120ms;
    --duration-base: 180ms;
    --duration-slow: 280ms;

    /* Layers (existing overlays use 9000+; keep new shell layers below them) */
    --z-topbar: 40;
    --z-popover: 60;
    --z-settings: 9400;
    --z-modal: 9306; /* above the hourglass run layer (9300-9305) */

    /* Layout */
    --shell-max-width: 1760px;
    --shell-gutter: clamp(12px, 1.6vw, 24px);
    --topbar-h: 76px;
    --topbar-padding-top: 16px;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-base: 0ms;
        --duration-slow: 0ms;
    }
}