/* PadelCue Academy design tokens.
   Import as is. Every value a component uses lives here, so a Next.js build can
   change one file and keep every screen consistent.
   The canvas is a padel court under floodlights: deepest navy on the left, the
   brand blue on the right. Every navy gradient runs dark on the left to light
   on the right. No exceptions. */

@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body.academy-world {
  /* Colour. Navy ladder, brand lime, ink for text on lime. */
  --navy-0: #090D1A;
  --navy-1: #0D1326;
  --navy-2: #121A36;
  --navy-3: #1A2550;
  --navy-4: #2A3E78;
  --lime: #C8E84A;
  --lime-hi: #EFFA86;
  --lime-mid: #CDE636;
  --lime-lo: #A6C71C;
  --ink: #14181D;
  --white: #FFFFFF;

  /* Text on navy. All tinted from the navy hue, never grey.
     text: 16.9:1 on navy-1. text-2: 9.7:1 on navy-1. text-3: 8.1:1 on navy-1, 4.5:1 on navy-4. */
  --text: #F4F6FB;
  --text-2: #B4BDD6;
  --text-3: #A1ACCA;
  --danger: #FFB4A8;
  --danger-line: rgba(255, 180, 168, 0.35);

  /* Lines and glass. Hairlines are navy tinted white. Glass with blur is for fixed bars only. */
  --line: rgba(187, 206, 245, 0.14);
  --line-2: rgba(187, 206, 245, 0.26);
  --glass: rgba(13, 19, 38, 0.74);
  --glass-2: rgba(255, 255, 255, 0.055);
  --glass-3: rgba(255, 255, 255, 0.10);
  --glass-4: rgba(255, 255, 255, 0.16);
  --blur: blur(20px) saturate(150%);

  /* Lime tints for chips, banners and the Do cell. */
  --lime-tint-1: rgba(200, 232, 74, 0.08);
  --lime-tint-2: rgba(200, 232, 74, 0.16);
  --lime-line: rgba(200, 232, 74, 0.34);
  --lime-ring: rgba(200, 232, 74, 0.22);

  /* Gradients. Dark left, light right, always. */
  --grad-navy: linear-gradient(100deg, #090D1A 0%, #0C1226 45%, #182350 100%);
  --grad-brand: linear-gradient(90deg, #090D1A 0%, #2A3E78 100%);
  --grad-lime: linear-gradient(90deg, var(--lime-tint-1), var(--lime-tint-2));
  --ball: radial-gradient(circle at 38% 32%, #EFFA86 0%, #CDE636 55%, #A6C71C 100%);
  --scrim: linear-gradient(90deg, rgba(9, 13, 26, 0.94) 0%, rgba(9, 13, 26, 0.72) 38%, rgba(9, 13, 26, 0.2) 72%, rgba(9, 13, 26, 0.05) 100%);
  --scrim-soft: linear-gradient(90deg, rgba(9, 13, 26, 0.9) 0%, rgba(9, 13, 26, 0.55) 50%, rgba(9, 13, 26, 0.12) 100%);
  --scrim-closed: linear-gradient(90deg, rgba(9, 13, 26, 0.6), rgba(9, 13, 26, 0.15));
  --floodlight: radial-gradient(70% 60% at 100% 0%, rgba(42, 62, 120, 0.75), rgba(42, 62, 120, 0) 70%);

  /* Shape. One scale, concentric when nested: a 24px shell with 6px padding holds an 18px core. */
  --r-xs: 8px;
  --r-s: 12px;
  --r: 16px;
  --r-l: 24px;
  --pill: 999px;
  --bezel: 6px;

  /* Depth. Offset plus soft blur, never a zero offset halo. */
  --shadow-1: 0 10px 24px -12px rgba(0, 0, 0, 0.55);
  --shadow-2: 0 24px 60px -28px rgba(0, 0, 0, 0.7), 0 2px 10px rgba(0, 0, 0, 0.25);
  --shadow-btn: 0 10px 22px -12px rgba(0, 0, 0, 0.7);
  --inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* Space. Base 4. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
  --measure: 65ch;
  --sec: clamp(56px, 7vw, 104px);
  --nav-h: 72px;
  --tab-h: 70px;

  /* Type. Outfit only. Hierarchy from size and weight steps. */
  --font: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-display: clamp(2.4rem, 4.3vw, 3.9rem);
  --fs-cover: clamp(2.2rem, 5vw, 4rem);
  --fs-h1: clamp(2rem, 3.8vw, 3rem);
  --fs-h2: clamp(1.5rem, 2.6vw, 2.125rem);
  --fs-h3: 1.1875rem;
  --fs-card: 1.0625rem;
  --fs-price: 2.75rem;
  --fs-lead: clamp(1.0625rem, 1.4vw, 1.25rem);
  --fs-body: 17px;
  --fs-small: 0.9375rem;
  --fs-meta: 0.8125rem;
  --fs-micro: 0.75rem;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;
  --lh-tight: 1;
  --lh-heading: 1.1;
  --lh-body: 1.55;
  --track-display: -0.035em;
  --track-heading: -0.025em;
  --track-card: -0.01em;

  /* Motion. Two easings. Interface uses --ease, media and reveals use --cine. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cine: cubic-bezier(0.32, 0.72, 0, 1);
  --t1: 160ms;
  --t2: 420ms;
  --t3: 800ms;
  --t-media: 900ms;
  --t-light: 2400ms;

  /* Layers. Systemic only. */
  --z-nav: 40;
  --z-bar: 40;
  --z-toast: 60;

  /* Browser surfaces. */
  --focus: 2px solid var(--lime);
  --focus-offset: 3px;
  color-scheme: dark;
  caret-color: var(--lime);
  accent-color: var(--lime);
}

@media (max-width: 760px) {
  body.academy-world { --nav-h: 60px; }
}