/* ==========================================================================
   Canary Design System — Design Tokens
   Theme: tibiacom (dark fantasy / editorial premium / modern UI)

   Every visual decision lives here. Components must reference tokens only;
   never hard-code colors, spacing, easing or type sizes in component CSS.
   ========================================================================== */

:root {
	/* --------------------------------------------------------------------
	   Color — backgrounds & surfaces
	   -------------------------------------------------------------------- */
	--bg-deep: #000000;
	--bg-primary: #090909;
	--bg-secondary: #0d0d0d;
	--surface-dark: #101010;
	--surface-elevated: #16150f; /* warm-tinted charcoal, sits on --bg-primary */
	--surface-overlay: rgba(5, 5, 5, 0.9);
	--surface-glass: rgba(9, 9, 9, 0.62);

	/* --------------------------------------------------------------------
	   Color — text
	   -------------------------------------------------------------------- */
	--text-primary: #ece6d9;   /* warm ivory */
	--text-secondary: #b6b0a4;
	--text-muted: #7b766c;
	--text-inverse: #090909;

	/* --------------------------------------------------------------------
	   Color — gold family (parchment / aged brass / bone). Never metallic yellow.
	   -------------------------------------------------------------------- */
	--gold-primary: #dcc69b;
	--gold-bright: #ecdcb3;
	--gold-muted: #a89470;
	--gold-deep: #7c6a49;
	--bone: #e8e1d0;

	/* Gold as RGB channels for alpha composition: rgb(var(--gold-rgb) / .25) */
	--gold-rgb: 220 198 155;
	--bone-rgb: 232 225 208;

	/* Molten gold — reserved for the primary call to action (.fbtn--primary):
	   a saturated, luminous brass that reads as the one thing to press. */
	--gold-cta-top: #f3d68d;
	--gold-cta: #d9ad52;
	--gold-cta-deep: #a8792b;
	--gold-cta-rgb: 217 173 82;
	--gold-cta-ink: #1a1306;

	/* Podium metals — highscores gold / silver / bronze (RGB for alpha) */
	--podium-gold-rgb: 243 217 138;
	--podium-silver-rgb: 196 202 214;
	--podium-bronze-rgb: 196 122 72;

	/* --------------------------------------------------------------------
	   Color — accents (red is an accent only: hover, selected, danger, CTA)
	   -------------------------------------------------------------------- */
	--blood-red: #b4161b;
	--blood-bright: #d51e24;
	--blood-deep: #6e0f12;
	--blood-rgb: 180 22 27;

	--success: #7f9c6a;
	--warning: #c99a4b;
	--info: #8c9fb1;

	/* --------------------------------------------------------------------
	   Color — borders & ornaments
	   -------------------------------------------------------------------- */
	--border-subtle: rgb(var(--gold-rgb) / 0.1);
	--border-default: rgb(var(--gold-rgb) / 0.18);
	--border-strong: rgb(var(--gold-rgb) / 0.42);
	--border-ornament: rgb(var(--gold-rgb) / 0.55);
	--border-ornament-bright: rgb(var(--gold-rgb) / 0.85);
	--border-danger: rgb(var(--blood-rgb) / 0.6);

	/* --------------------------------------------------------------------
	   Typography — families
	   -------------------------------------------------------------------- */
	--font-display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
	--font-body: "Cabin", "Gill Sans", "Gill Sans MT", "Segoe UI", system-ui, sans-serif;
	--font-ui: var(--font-body);
	--font-mono: ui-monospace, "Cascadia Mono", "Consolas", monospace;

	/* --------------------------------------------------------------------
	   Typography — fluid scale (min → max between 360px and 1440px)
	   -------------------------------------------------------------------- */
	--text-display: clamp(2.75rem, 1.6rem + 5.1vw, 6.25rem);      /* 44 → 100 */
	--text-h1: clamp(2.25rem, 1.55rem + 3vw, 4rem);                /* 36 → 64 */
	--text-h2: clamp(1.75rem, 1.35rem + 1.75vw, 2.75rem);          /* 28 → 44 */
	--text-h3: clamp(1.25rem, 1.1rem + 0.65vw, 1.625rem);          /* 20 → 26 */
	--text-h4: 1.125rem;                                           /* 18 */
	--text-eyebrow: 0.75rem;                                       /* 12 */
	--text-body-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);    /* 17 → 19 */
	--text-body: 1rem;                                             /* 16 */
	--text-small: 0.875rem;                                        /* 14 */
	--text-caption: 0.75rem;                                       /* 12 */
	--text-button: 0.8125rem;                                      /* 13 */
	--text-nav: 0.8125rem;                                         /* 13 */

	/* Tracking (letter-spacing). Uppercase UI text always tracks. */
	--tracking-display: 0.04em;
	--tracking-heading: 0.06em;
	--tracking-eyebrow: 0.28em;
	--tracking-button: 0.18em;
	--tracking-nav: 0.14em;
	--tracking-label: 0.12em;
	--tracking-body: 0.005em;

	/* Leading */
	--leading-display: 1.02;
	--leading-heading: 1.12;
	--leading-body: 1.65;
	--leading-tight: 1.3;

	/* Weights */
	--weight-display: 500;
	--weight-heading: 600;
	--weight-body: 400;
	--weight-ui: 600;

	/* --------------------------------------------------------------------
	   Spacing
	   -------------------------------------------------------------------- */
	--spacing-2xs: 0.125rem; /* 2 */
	--spacing-xs: 0.25rem;   /* 4 */
	--spacing-sm: 0.5rem;    /* 8 */
	--spacing-md: 1rem;      /* 16 */
	--spacing-lg: 1.5rem;    /* 24 */
	--spacing-xl: 2.5rem;    /* 40 */
	--spacing-2xl: 4rem;     /* 64 */
	--spacing-3xl: 6rem;     /* 96 */
	--spacing-4xl: 9rem;     /* 144 */

	/* Section rhythm */
	--section-gap: clamp(4rem, 3rem + 5vw, 9rem);
	--section-gap-sm: clamp(2.5rem, 2rem + 3vw, 5rem);

	/* --------------------------------------------------------------------
	   Layout
	   -------------------------------------------------------------------- */
	--container-max: 1280px;
	--container-narrow: 820px;
	--container-wide: 1440px;
	--gutter: clamp(1.25rem, 1rem + 2vw, 3rem);
	--header-height: 88px;
	--header-height-scrolled: 68px;

	/* --------------------------------------------------------------------
	   Shape — this system is straight-edged. Radius is nearly never used.
	   -------------------------------------------------------------------- */
	--radius-none: 0;
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-round: 999px;

	/* Geometric cut used by chamfered elements (buttons, primary cards). */
	--cut-sm: 5px;
	--cut-md: 8px;
	--cut-lg: 12px;

	/* --------------------------------------------------------------------
	   Elevation — shadows are used sparingly and are always cold/black
	   -------------------------------------------------------------------- */
	--shadow-soft: 0 12px 40px -18px rgba(0, 0, 0, 0.9);
	--shadow-deep: 0 30px 80px -30px rgba(0, 0, 0, 0.95);
	--glow-gold: 0 0 0 1px rgb(var(--gold-rgb) / 0.35), 0 0 22px -6px rgb(var(--gold-rgb) / 0.35);
	--glow-gold-soft: 0 0 0 3px rgb(var(--gold-rgb) / 0.12);
	--glow-blood: 0 0 0 1px rgb(var(--blood-rgb) / 0.4), 0 0 22px -6px rgb(var(--blood-rgb) / 0.35);

	/* --------------------------------------------------------------------
	   Motion — cinematic easing, restrained durations (200–700ms)
	   -------------------------------------------------------------------- */
	--ease-cine: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

	--duration-fast: 180ms;
	--duration-base: 320ms;
	--duration-slow: 560ms;
	--duration-xslow: 720ms;

	--stagger: 70ms;

	/* --------------------------------------------------------------------
	   Texture
	   -------------------------------------------------------------------- */
	--texture-opacity: 0.035;
	--texture-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	--texture-hairline: repeating-linear-gradient(
		135deg,
		rgba(0, 0, 0, 0) 0 3px,
		rgba(0, 0, 0, 0.028) 3px 4px
	);
	/* Parchment sheen for gold fills — felt as material, not as a gradient */
	--texture-parchment: linear-gradient(
		180deg,
		rgba(255, 250, 235, 0.16) 0%,
		rgba(255, 250, 235, 0) 45%,
		rgba(60, 40, 10, 0) 55%,
		rgba(60, 40, 10, 0.12) 100%
	);

	/* --------------------------------------------------------------------
	   Z-index scale
	   -------------------------------------------------------------------- */
	--z-below: -1;
	--z-base: 0;
	--z-raised: 10;
	--z-sticky: 100;
	--z-header: 500;
	--z-overlay: 900;
	--z-modal: 1000;
	--z-toast: 1100;

	/* --------------------------------------------------------------------
	   Component sizing
	   -------------------------------------------------------------------- */
	--button-height: 56px;
	--button-height-sm: 44px;
	--button-min-width: 220px;
	--icon-button-size: 52px;
	--icon-button-size-sm: 40px;
	--input-height: 52px;
	--control-size: 20px;
}

/* Compact rhythm and lighter ornamentation on small screens. */
@media (max-width: 767.98px) {
	:root {
		--header-height: 68px;
		--header-height-scrolled: 60px;
		--button-height: 52px;
		--button-min-width: 0px;
		--icon-button-size: 46px;
		--input-height: 50px;
		--tracking-eyebrow: 0.22em;
	}
}