/* Poker Revamp '26 tokens: Aurora names (as in css/home/tokens.css). Colours and radii come from the
 * design-system poker theme that Poker.cshtml loads; its dark values apply because the page sets html.dark.
 * Each falls back to the page's own value in case the theme stylesheet fails to load. */

@font-face { font-family: Nexa; src: url("../../fonts/home/nexa-book.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Nexa; src: url("../../fonts/home/nexa-bold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: Nexa; src: url("../../fonts/home/nexa-extrabold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: Nexa; src: url("../../fonts/home/nexa-heavy.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  /* Roboto is loaded by _LayoutHome. */
  --font-heading: "Nexa", "Segoe UI", system-ui, sans-serif;
  --font-body: "Roboto", system-ui, -apple-system, sans-serif;

  --radius-sm: var(--rounded-sm, 0.25rem);
  --radius-md: var(--rounded-md, 0.375rem);
  --radius-lg: var(--rounded-lg, 0.5rem);
  --radius-lgx: var(--rounded-lgx, 0.625rem);
  --radius-xl: var(--rounded-xl, 0.75rem);
  --radius-2xl: var(--rounded-2xl, 1rem);
  --radius-3xl: var(--rounded-3xl, 1.5rem);
  --radius-full: var(--rounded-full, 1000rem);
  --radius-action-1: var(--rounded-action-1, 1000rem);
  --radius-action-2: var(--rounded-action-2, 0.5rem);

  /* Figma's scale steps 30/36/48/60 above 24px, not Aurora's 28/32/40/48. */
  --text-2xs: 0.625rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;

  --color-background-1: var(--background-1, #010b17);
  --color-background-2: var(--background-2, #010a19);
  --color-card-1: var(--card-1, #061326);
  --color-card-3: var(--card-3, #1c2746);
  --color-card-solid: var(--card-solid, #061326);
  --color-card-border: var(--card-border, #212a3b);
  --color-foreground-high: var(--foreground-high, #f8fafc);
  --color-foreground-medium: var(--foreground-medium, #d3dae6);
  --color-foreground-low: var(--foreground-low, #9eaabe);
  --color-artwork-foreground-white: var(--artwork-foreground-white, #ffffff);
  --color-fill-low: var(--fill-low, #051e44);
  --color-border-low: var(--border-low, #3f4857);
  --color-border-medium: var(--border-medium, #576276);
  --color-success-text: var(--success-text, #91e7c6);
  --color-success-muted: var(--success-muted, #002c34);
  --color-link: var(--link, #a4d8ff);
  --color-primary: var(--primary, #007bff);
  --color-primary-hover: var(--primary-hover, hsl(211 100% 60%));
  --color-primary-active: var(--primary-active, hsl(211 100% 70%));
  --color-primary-foreground: var(--primary-foreground, #ffffff);
  --color-cta-2: var(--cta-2, #ffc107);
  --color-cta-2-hover: var(--cta-2-hover, hsl(45 100% 61%));
  --color-cta-2-active: var(--cta-2-active, hsl(45 100% 71%));
  --color-cta-2-foreground: var(--cta-2-foreground, #0e2857);
  --color-cta-3: var(--cta-3, rgb(255 255 255 / 18%));
  --color-cta-3-hover: var(--cta-3-hover, rgb(255 255 255 / 28%));
  --color-cta-3-active: var(--cta-3-active, rgb(255 255 255 / 38%));
  --color-cta-3-border: var(--cta-3-border, #83c7ff);
  --color-cta-3-foreground: var(--cta-3-foreground, #feffff);
  --color-tone-red: var(--tone-red, #ec0100);
  --color-tone-red-foreground: var(--tone-red-foreground, #feffff);
  --color-tone-blue: var(--tone-blue, #208fff);
  --color-tone-blue-foreground: var(--tone-blue-foreground, #feffff);
  --color-tone-orange: var(--tone-orange, #e36d00);
  --color-tone-orange-foreground: var(--tone-orange-foreground, #feffff);
  --color-tone-yellow: var(--tone-yellow, #f6df1b);
  --color-alpha-7-5: var(--alpha-7-5, rgb(248 250 252 / 7%));
  --color-alpha-20: var(--alpha-20, rgb(248 250 252 / 20%));
  --color-inv-card-3: var(--inv-card-3, #f2f5f9);

  /* Figma has desktop (1920) and mobile (390) frames only; the 768px step is interpolated. */
  --poker-maxw: 1424px;
  --poker-gutter: 12px;
  --poker-section-gap: 16px;
  --poker-head-gap: 16px;
  --poker-page-pad-bottom: 32px;
}

@media (min-width: 768px) {
  :root {
    --poker-gutter: 24px;
    --poker-section-gap: 32px;
    --poker-head-gap: 24px;
    --poker-page-pad-bottom: 64px;
  }
}

@media (min-width: 1024px) {
  :root {
    --poker-gutter: 40px;
    --poker-section-gap: 40px;
    --poker-head-gap: 30px;
    --poker-page-pad-bottom: 90px;
  }
}