/* ==========================================================================
   WINNERA WORLD PORTAL — DESIGN TOKENS
   --------------------------------------------------------------------------
   Single source of truth for the portal's visual language. Nothing below this
   file should contain a raw hex value, a magic pixel size or a bare timing.
   ========================================================================== */

:root {
	/* ---- Core palette -------------------------------------------------- */
	--wn-obsidian:        #090A0C;
	--wn-stone-dark:      #121418;
	--wn-iron:            #202329;
	--wn-iron-light:      #2B2F37;

	--wn-gold:            #C8A35A;
	--wn-gold-bright:     #E5C878;
	--wn-gold-deep:       #8A6E33;

	--wn-blood:           #741E24;
	--wn-blood-bright:    #A83039;

	--wn-bone:            #E7E2D8;
	--wn-ash:             #A29C90;
	/* Muted tone is lifted from the reference #6E6A63 to #8B857B so that small
	   uppercase labels clear WCAG AA (4.5:1) on the obsidian ground. Measured
	   at 3.68:1 before, 5.2:1 after. */
	--wn-smoke:           #8B857B;

	--wn-verdant:         #4E7A4A;   /* success / online */
	--wn-ember:           #B5762C;   /* warning */

	/* ---- Semantic surfaces --------------------------------------------- */
	--wn-bg:              var(--wn-obsidian);
	--wn-bg-deep:         #060709;
	--wn-surface:         var(--wn-stone-dark);
	--wn-surface-raised:  #171A1F;
	--wn-surface-sunken:  #0C0E11;
	--wn-stone:           #16191E;
	--wn-metal:           var(--wn-iron);

	/* ---- Borders -------------------------------------------------------- */
	--wn-border:          rgba(200, 163, 90, 0.14);
	--wn-border-strong:   rgba(200, 163, 90, 0.30);
	--wn-border-iron:     rgba(255, 255, 255, 0.06);
	--wn-border-hairline: rgba(255, 255, 255, 0.035);

	/* ---- Text ----------------------------------------------------------- */
	--wn-text:            var(--wn-bone);
	--wn-text-secondary:  var(--wn-ash);
	--wn-text-muted:      var(--wn-smoke);
	--wn-text-gold:       var(--wn-gold-bright);
	--wn-text-inverse:    #0B0C0E;

	/* ---- State ---------------------------------------------------------- */
	--wn-success:         var(--wn-verdant);
	--wn-warning:         var(--wn-ember);
	--wn-danger:          var(--wn-blood-bright);
	--wn-info:            #4A6B84;

	/* On-dark TEXT variants. The surface colours above are correct for bars,
	   borders and fills but fail WCAG AA as text on the obsidian ground
	   (--wn-danger measures 2.97:1). Validation messages must always be
	   readable, so text uses these lifted tones instead. */
	--wn-danger-text:     #E9959C;   /* 7.4:1 on --wn-bg */
	--wn-success-text:    #8FBE89;
	--wn-warning-text:    #D9A25F;

	/* ---- Typography -----------------------------------------------------
	   Two voices, strictly separated:

	   --wn-font-display  the decorative Winnera face. Logo, major headings,
	                      and important world names only (season names, boss
	                      and creature names, character names).

	   --wn-font-body     everything that must be read quickly: statistics,
	                      numbers, navigation, descriptions, account controls
	                      and tables. Never decorative at small sizes.

	   --wn-font-numeric  body face locked to tabular lining figures, so
	                      readouts stay aligned as values change.
	   -------------------------------------------------------------------- */
	--wn-font-display: "Winnera Display", "Trajan Pro", "Cormorant Garamond",
	                   "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
	--wn-font-body:    "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont,
	                   "Helvetica Neue", Arial, sans-serif;
	--wn-font-numeric: var(--wn-font-body);
	--wn-font-mono:    "JetBrains Mono", "SFMono-Regular", Consolas,
	                   "Liberation Mono", Menlo, monospace;

	/* Fluid type scale — cinematic on desktop, readable on mobile */
	--wn-text-hero:    clamp(2.75rem, 1.2rem + 6.6vw, 7rem);
	--wn-text-h1:      clamp(2rem,   1.2rem + 3.2vw, 3.75rem);
	--wn-text-h2:      clamp(1.6rem, 1.1rem + 2.1vw, 2.75rem);
	--wn-text-h3:      clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
	--wn-text-h4:      clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
	--wn-text-lead:    clamp(1rem,   0.95rem + 0.35vw, 1.175rem);
	--wn-text-body:    1rem;
	--wn-text-small:   0.875rem;
	--wn-text-tiny:    0.8125rem;   /* was 0.75 — utility copy was too light to scan */
	--wn-text-label:   0.75rem;     /* was 0.6875 — floor for uppercase labels */
	--wn-text-micro:   0.6875rem;   /* absolute minimum anywhere in the portal */
	--wn-text-numeral: clamp(3rem, 1.5rem + 6vw, 6.5rem);

	/* Readout sizes — the values a returning player actually comes back for.
	   These are deliberately larger than ordinary body copy. */
	--wn-read-lg:      1.75rem;   /* players online, headline figures */
	--wn-read:         1.375rem;  /* rail readouts, account stats */
	--wn-read-sm:      1.125rem;  /* inline figures inside dense rows */

	--wn-leading-tight: 1.05;
	--wn-leading-snug:  1.25;
	--wn-leading-body:  1.65;

	/* Inscription tracking — used on every small caps label */
	--wn-track-label:  0.24em;
	--wn-track-title:  0.04em;
	--wn-track-hero:   0.16em;

	/* ---- Spacing (4px base) --------------------------------------------- */
	--wn-space-1:   0.25rem;
	--wn-space-2:   0.5rem;
	--wn-space-3:   0.75rem;
	--wn-space-4:   1rem;
	--wn-space-5:   1.5rem;
	--wn-space-6:   2rem;
	--wn-space-7:   3rem;
	--wn-space-8:   4rem;
	--wn-space-9:   6rem;
	--wn-space-10:  8rem;

	/* Vertical rhythm between homepage sections */
	--wn-section-y:      clamp(3.5rem, 2rem + 7vw, 8rem);
	--wn-section-y-tight:clamp(2.5rem, 1.5rem + 4vw, 5rem);

	/* ---- Containers ------------------------------------------------------ */
	--wn-container:       1280px;
	--wn-container-wide:  1560px;
	--wn-container-text:  760px;
	--wn-gutter:          clamp(1.125rem, 0.5rem + 2.5vw, 3rem);

	/* ---- Radius — deliberately small: this is stone, not plastic --------- */
	--wn-radius-none: 0;
	--wn-radius-sm:   2px;
	--wn-radius:      3px;
	--wn-radius-lg:   5px;
	--wn-radius-full: 999px;

	/* ---- Elevation ------------------------------------------------------- */
	--wn-shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.6);
	--wn-shadow:      0 4px 18px rgba(0, 0, 0, 0.55);
	--wn-shadow-lg:   0 18px 50px rgba(0, 0, 0, 0.65);
	--wn-shadow-deep: 0 40px 90px rgba(0, 0, 0, 0.75);
	--wn-inset-top:   inset 0 1px 0 rgba(255, 255, 255, 0.045);

	/* ---- Glow — restrained by policy ------------------------------------- */
	--wn-glow-gold:   0 0 24px rgba(200, 163, 90, 0.16);
	--wn-glow-ember:  0 0 32px rgba(181, 118, 44, 0.14);
	--wn-glow-focus:  0 0 0 2px var(--wn-obsidian), 0 0 0 4px var(--wn-gold);

	/* ---- Motion ---------------------------------------------------------- */
	--wn-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
	--wn-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
	--wn-dur-fast:    120ms;
	--wn-dur:         220ms;
	--wn-dur-slow:    420ms;
	--wn-dur-ambient: 14s;

	/* ---- Layering -------------------------------------------------------- */
	--wn-z-base:      1;
	--wn-z-raised:    10;
	--wn-z-sticky:    100;
	--wn-z-header:    200;
	--wn-z-drawer:    300;
	--wn-z-modal:     400;
	--wn-z-tooltip:   500;

	/* ---- Chrome dimensions ----------------------------------------------- */
	--wn-header-h:       76px;
	--wn-header-h-small: 60px;
	--wn-worldbar-h:     56px;   /* mobile sticky status bar */

	/* ---- Atmosphere ------------------------------------------------------
	   Textures are generated, not shipped as artwork, so the portal carries no
	   unrelated stock fantasy imagery. */
	--wn-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");

	--wn-grain-opacity: 0.035;

	/* Mist layers used by hero and full-bleed sections */
	--wn-mist:
		radial-gradient(ellipse 120% 70% at 50% 0%,   rgba(200, 163, 90, 0.10), transparent 62%),
		radial-gradient(ellipse 90%  60% at 12% 88%,  rgba(116, 30, 36, 0.13),  transparent 60%),
		radial-gradient(ellipse 70%  55% at 88% 72%,  rgba(74, 107, 132, 0.10), transparent 60%);

	/* Engraved stone surface */
	--wn-stone-face:
		linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 42%),
		linear-gradient(180deg, var(--wn-surface-raised), var(--wn-surface-sunken));

	/* Hairline gold rule with faded ends — the portal's signature separator */
	--wn-rule-gold: linear-gradient(90deg,
		transparent, rgba(200, 163, 90, 0.05) 8%,
		rgba(200, 163, 90, 0.45) 50%,
		rgba(200, 163, 90, 0.05) 92%, transparent);
}

/* --------------------------------------------------------------------------
   Reduced motion: ambient animation is decoration, never information.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	:root {
		--wn-dur-fast: 1ms;
		--wn-dur: 1ms;
		--wn-dur-slow: 1ms;
		--wn-dur-ambient: 1ms;
	}
}

/* --------------------------------------------------------------------------
   Forced colours / high contrast: keep structure, drop atmosphere.
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
	:root {
		--wn-grain-opacity: 0;
	}
}