/* LEVEL-ONE CSS tokens */
:root {
  --font-brand-display: "Barlow", sans-serif;
  --font-brand-club: "Myanmar Text", serif;
  --font-brand-display-weight: 900;
  --font-brand-display-style: italic;
  --font-brand-club-weight: 700;

  --color-garlando-red: #c41818;
  --color-garlando-blue: #185cbf;
  --color-garlando-dark: #15181e;
  --color-tornado-yellow: #e6a500;
  --color-tornado-dark: #1b1813;
  --color-leonhart-green: #1d8745;
  --color-leonhart-dark: #131b17;

  --theme-primary-rgb: 29, 135, 69;
  --theme-secondary-rgb: 19, 27, 23;
  --theme-primary: var(--color-leonhart-green);
  --theme-secondary: var(--color-leonhart-dark);
  --theme-dark: var(--color-leonhart-dark);
  --theme-bg: #0d1511;
  --theme-bg-soft: #111b17;
  --theme-surface: rgba(19, 27, 23, 0.9);
  --theme-surface-strong: rgba(16, 23, 20, 0.95);
  --theme-border: rgba(82, 127, 101, 0.34);
  --theme-text: #f2f7f4;
  --theme-text-muted: #c7d2cb;
  --theme-button-text: #f3fff7;
  --theme-focus-ring: rgba(29, 135, 69, 0.44);
  --theme-primary-soft: rgba(29, 135, 69, 0.14);
  --theme-primary-soft-strong: rgba(29, 135, 69, 0.25);
  --home-hero-bg-image: url("/static/img/hero/leonhart/hero-leonhart-desktop.webp");
  --theme-gradient:
    radial-gradient(circle at 16% 0%, rgba(29, 135, 69, 0.17), transparent 26rem),
    radial-gradient(circle at 84% 0%, rgba(19, 27, 23, 0.24), transparent 30rem),
    linear-gradient(180deg, #101913 0%, #0d1410 34%, #090c0a 100%);

  --bg-main: var(--theme-bg);
  --bg-dark: var(--theme-bg-soft);
  --bg-soft: var(--theme-bg-soft);
  --surface: var(--theme-surface);
  --surface-strong: var(--theme-surface-strong);
  --surface-muted: rgba(255, 255, 255, 0.03);
  --text-main: var(--theme-text);
  --text-soft: var(--theme-text-muted);
  --text-dim: #8d9891;
  --accent-yellow: var(--theme-primary);
  --accent-yellow-soft: var(--theme-primary);
  --accent-yellow-dark: var(--theme-secondary);
  --border-subtle: var(--theme-border);
  --glow-yellow: 0 0 20px var(--theme-primary-soft-strong);
  --bg: var(--bg-main);
  --text: var(--text-main);
  --muted: var(--text-soft);
  --line: var(--border-subtle);
  --line-strong: rgba(255, 255, 255, 0.16);
  --brand: var(--theme-primary);
  --brand-strong: var(--theme-primary);
  --brand-soft: var(--theme-primary-soft);
  --card-border-accent: var(--theme-primary-soft-strong);
  --card-border-accent-strong: var(--theme-focus-ring);
  --danger: #ff6c62;
  --warning: #f1bb4e;
  --info: #7db7ff;
  --success: #87d98f;

  --lo-page-gutter: clamp(0.875rem, 3vw, 1.25rem);
  --lo-shell: 1440px;
  --lo-content-shell: 1220px;
  --lo-radius-sm: 0.62rem;
  --lo-radius-md: 0.95rem;
  --lo-radius-lg: 1.35rem;
  --lo-radius-pill: 999px;
  --lo-text-sm: 0.84rem;
  --lo-text-md: 0.94rem;
  --lo-text-h1: clamp(1.62rem, 4.7vw, 2.18rem);
  --lo-text-h2: clamp(1.24rem, 3.4vw, 1.58rem);
  --lo-text-h3: clamp(1.05rem, 2.6vw, 1.2rem);
  --lo-control-height: 2.55rem;
  --lo-control-height-sm: 2.18rem;
  --lo-card-padding: clamp(0.82rem, 2vw, 1.25rem);
  --lo-grid-gap: clamp(0.55rem, 1.7vw, 1rem);
  --lo-header-logo-mobile-w: clamp(14.4rem, 72vw, 18.2rem);
  --lo-header-logo-mobile-h: 2.75rem;
  --lo-header-action-mobile: 2.42rem;

  /* Legacy aliases used by the remaining site.css blocks. */
  --admin-scroll-offset: 210px;
  --radius-lg: 28px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 80px;
  --page-gutter: clamp(1rem, 3vw, 2.5rem);
  --page-gutter-tight: clamp(0.875rem, 3.2vw, 1rem);
  --shell: 1440px;
  --copy: 860px;
  --copy-wide: 1360px;
  --content-shell: 1220px;
  --admin-shell: 1220px;
  --admin-content-max: 1220px;
  --admin-space-page: clamp(1rem, 2vw, 1.5rem);
  --admin-space-section: var(--section-gap);
  --admin-space-panel: var(--section-gap);
  --type-h1-size: clamp(1.78rem, 3vw, 2.12rem);
  --type-h1-line: 1.02;
  --type-h1-weight: 900;
  --type-h2-size: clamp(1.3rem, 1.8vw, 1.5rem);
  --type-h2-line: 1.12;
  --type-h2-weight: 800;
  --type-h3-size: clamp(1.02rem, 1.24vw, 1.12rem);
  --type-h3-line: 1.18;
  --type-h3-weight: 750;
  --type-h4-size: 0.98rem;
  --type-h4-line: 1.3;
  --type-h4-weight: 700;
  --type-body-lg-size: 0.98rem;
  --type-body-size: 0.98rem;
  --type-body-line: 1.42;
  --type-small-size: 0.88rem;
  --type-small-line: 1.4;
  --type-meta-size: 0.88rem;
  --type-meta-line: 1.4;
  --type-label-size: 0.82rem;
  --type-label-line: 1.28;
  --type-button-size: 0.88rem;
  --type-button-line: 1.15;
  --type-table-size: 0.96rem;
  --control-height: 2.9rem;
  --control-height-compact: 2.55rem;
  --control-padding-x: 1rem;
  --control-padding-y: 0.72rem;
  --card-padding: clamp(1.25rem, 2vw, 1.55rem);
  --card-padding-compact: 1.25rem;
  --card-stack-gap: clamp(0.55rem, 1.05vw, 0.8rem);
  --card-grid-gap: var(--card-stack-gap);
  --page-section-gap: var(--card-stack-gap);
  --section-gap: var(--card-stack-gap);
}

.theme-leonhart {
  --theme-primary-rgb: 29, 135, 69;
  --theme-secondary-rgb: 19, 27, 23;
  --theme-primary: var(--color-leonhart-green);
  --theme-secondary: var(--color-leonhart-dark);
  --theme-dark: var(--color-leonhart-dark);
  --theme-bg: #0d1511;
  --theme-bg-soft: #111b17;
  --theme-surface: rgba(19, 27, 23, 0.9);
  --theme-surface-strong: rgba(16, 23, 20, 0.95);
  --theme-border: rgba(82, 127, 101, 0.34);
  --theme-text: #f2f7f4;
  --theme-text-muted: #c7d2cb;
  --theme-button-text: #f3fff7;
  --theme-focus-ring: rgba(29, 135, 69, 0.44);
  --theme-primary-soft: rgba(29, 135, 69, 0.14);
  --theme-primary-soft-strong: rgba(29, 135, 69, 0.25);
  --home-hero-bg-image: url("/static/img/hero/leonhart/hero-leonhart-desktop.webp");
  --theme-gradient:
    radial-gradient(circle at 16% 0%, rgba(29, 135, 69, 0.17), transparent 26rem),
    radial-gradient(circle at 84% 0%, rgba(19, 27, 23, 0.24), transparent 30rem),
    linear-gradient(180deg, #101913 0%, #0d1410 34%, #090c0a 100%);
}

.theme-garlando {
  --theme-primary-rgb: 196, 24, 24;
  --theme-secondary-rgb: 24, 92, 191;
  --theme-primary: var(--color-garlando-red);
  --theme-secondary: var(--color-garlando-blue);
  --theme-dark: var(--color-garlando-dark);
  --theme-bg: #0f1218;
  --theme-bg-soft: #121727;
  --theme-surface: rgba(21, 24, 30, 0.9);
  --theme-surface-strong: rgba(19, 22, 29, 0.95);
  --theme-border: rgba(84, 104, 138, 0.38);
  --theme-text: #f4f6fa;
  --theme-text-muted: #c7cfdb;
  --theme-button-text: #f7fbff;
  --theme-focus-ring: rgba(24, 92, 191, 0.44);
  --theme-primary-soft: rgba(196, 24, 24, 0.14);
  --theme-primary-soft-strong: rgba(196, 24, 24, 0.25);
  --home-hero-bg-image: url("/static/img/hero/garlando/hero-garlando-desktop.webp");
  --theme-gradient:
    radial-gradient(circle at 16% 0%, rgba(196, 24, 24, 0.16), transparent 24rem),
    radial-gradient(circle at 84% 0%, rgba(24, 92, 191, 0.16), transparent 26rem),
    linear-gradient(180deg, #11141d 0%, #0f131b 34%, #0a0d13 100%);
}

.theme-tornado {
  --theme-primary-rgb: 230, 165, 0;
  --theme-secondary-rgb: 27, 24, 19;
  --theme-primary: var(--color-tornado-yellow);
  --theme-secondary: var(--color-tornado-dark);
  --theme-dark: var(--color-tornado-dark);
  --theme-bg: #15120b;
  --theme-bg-soft: #1b1710;
  --theme-surface: rgba(29, 24, 16, 0.9);
  --theme-surface-strong: rgba(25, 21, 14, 0.95);
  --theme-border: rgba(168, 136, 67, 0.36);
  --theme-text: #f8f3e7;
  --theme-text-muted: #d7ccb7;
  --theme-button-text: #17120a;
  --theme-focus-ring: rgba(230, 165, 0, 0.42);
  --theme-primary-soft: rgba(230, 165, 0, 0.16);
  --theme-primary-soft-strong: rgba(230, 165, 0, 0.28);
  --home-hero-bg-image: url("/static/img/hero/tornado/hero-tornado-desktop.webp");
  --theme-gradient:
    radial-gradient(circle at 16% 0%, rgba(230, 165, 0, 0.16), transparent 25rem),
    radial-gradient(circle at 84% 0%, rgba(27, 24, 19, 0.25), transparent 30rem),
    linear-gradient(180deg, #17130c 0%, #15120d 34%, #100d08 100%);
}

:root,
:where(.theme-leonhart),
:where(.theme-garlando),
:where(.theme-tornado) {
  --bg-main: var(--theme-bg);
  --bg-dark: var(--theme-bg-soft);
  --bg-soft: var(--theme-bg-soft);
  --surface: var(--theme-surface);
  --surface-strong: var(--theme-surface-strong);
  --text-main: var(--theme-text);
  --text-soft: var(--theme-text-muted);
  --accent-yellow: var(--theme-primary);
  --accent-yellow-soft: var(--theme-primary);
  --accent-yellow-dark: var(--theme-secondary);
  --border-subtle: var(--theme-border);
  --glow-yellow: 0 0 20px var(--theme-primary-soft-strong);
  --bg: var(--bg-main);
  --text: var(--text-main);
  --muted: var(--text-soft);
  --line: var(--border-subtle);
  --brand: var(--theme-primary);
  --brand-strong: var(--theme-primary);
  --brand-soft: var(--theme-primary-soft);
  --card-border-accent: var(--theme-primary-soft-strong);
  --card-border-accent-strong: var(--theme-focus-ring);
}

@media (min-width: 1600px) {
  :where(.theme-leonhart) {
    --home-hero-bg-image: url("/static/img/hero/leonhart/hero-leonhart-wide.webp");
  }

  :where(.theme-garlando) {
    --home-hero-bg-image: url("/static/img/hero/garlando/hero-garlando-wide.webp");
  }

  :where(.theme-tornado) {
    --home-hero-bg-image: url("/static/img/hero/tornado/hero-tornado-wide.webp");
  }
}

@media (max-width: 1080px) {
  :where(.theme-leonhart) {
    --home-hero-bg-image: url("/static/img/hero/leonhart/hero-leonhart-tablet.webp");
  }

  :where(.theme-garlando) {
    --home-hero-bg-image: url("/static/img/hero/garlando/hero-garlando-tablet.webp");
  }

  :where(.theme-tornado) {
    --home-hero-bg-image: url("/static/img/hero/tornado/hero-tornado-tablet.webp");
  }
}

@media (max-width: 640px) {
  :where(.theme-leonhart) {
    --home-hero-bg-image: url("/static/img/hero/leonhart/hero-leonhart-mobile.webp");
  }

  :where(.theme-garlando) {
    --home-hero-bg-image: url("/static/img/hero/garlando/hero-garlando-mobile.webp");
  }

  :where(.theme-tornado) {
    --home-hero-bg-image: url("/static/img/hero/tornado/hero-tornado-mobile.webp");
  }
}