/* ============================================================
   Rugby Lab — Design Tokens
   Colors, type, spacing, radii, shadows, motion.
   ============================================================ */

/* -- Fonts ---------------------------------------------------- */
/* Display: Montserrat — architectural geometric sans for hero headlines,
   titles and "moment" copy. Self-hosted brand face (replaces the former
   Playfair Display placeholder). */
/* Body sans: Poppins — rounded geometric sans for paragraphs, labels, UI.
   Self-hosted brand face (replaces the former DM Sans). */
/* Montserrat — self-hosted brand face (uploaded TTF, weights 100–900 + italics). */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:100;font-display:swap;src:url("fonts/Montserrat-Thin.woff2") format("woff2");}
@font-face{font-family:"Montserrat";font-style:italic;font-weight:100;font-display:swap;src:url("fonts/Montserrat-ThinItalic.woff2") format("woff2");}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:200;font-display:swap;src:url("fonts/Montserrat-ExtraLight.woff2") format("woff2");}
@font-face{font-family:"Montserrat";font-style:italic;font-weight:200;font-display:swap;src:url("fonts/Montserrat-ExtraLightItalic.woff2") format("woff2");}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/Montserrat-Light.woff2") format("woff2");}
@font-face{font-family:"Montserrat";font-style:italic;font-weight:300;font-display:swap;src:url("fonts/Montserrat-LightItalic.woff2") format("woff2");}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/Montserrat-Regular.woff2") format("woff2");}
@font-face{font-family:"Montserrat";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/Montserrat-Italic.woff2") format("woff2");}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/Montserrat-Medium.woff2") format("woff2");}
@font-face{font-family:"Montserrat";font-style:italic;font-weight:500;font-display:swap;src:url("fonts/Montserrat-MediumItalic.woff2") format("woff2");}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/Montserrat-SemiBold.woff2") format("woff2");}
@font-face{font-family:"Montserrat";font-style:italic;font-weight:600;font-display:swap;src:url("fonts/Montserrat-SemiBoldItalic.woff2") format("woff2");}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/Montserrat-Bold.woff2") format("woff2");}
@font-face{font-family:"Montserrat";font-style:italic;font-weight:700;font-display:swap;src:url("fonts/Montserrat-BoldItalic.woff2") format("woff2");}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/Montserrat-ExtraBold.woff2") format("woff2");}
@font-face{font-family:"Montserrat";font-style:italic;font-weight:800;font-display:swap;src:url("fonts/Montserrat-ExtraBoldItalic.woff2") format("woff2");}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:900;font-display:swap;src:url("fonts/Montserrat-Black.woff2") format("woff2");}
@font-face{font-family:"Montserrat";font-style:italic;font-weight:900;font-display:swap;src:url("fonts/Montserrat-BlackItalic.woff2") format("woff2");}

/* Poppins — self-hosted brand face (uploaded TTF, weights 100–900 + italics). */
@font-face{font-family:"Poppins";font-style:normal;font-weight:100;font-display:swap;src:url("fonts/Poppins-Thin.woff2") format("woff2");}
@font-face{font-family:"Poppins";font-style:italic;font-weight:100;font-display:swap;src:url("fonts/Poppins-ThinItalic.woff2") format("woff2");}
@font-face{font-family:"Poppins";font-style:normal;font-weight:200;font-display:swap;src:url("fonts/Poppins-ExtraLight.woff2") format("woff2");}
@font-face{font-family:"Poppins";font-style:italic;font-weight:200;font-display:swap;src:url("fonts/Poppins-ExtraLightItalic.woff2") format("woff2");}
@font-face{font-family:"Poppins";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/Poppins-Light.woff2") format("woff2");}
@font-face{font-family:"Poppins";font-style:italic;font-weight:300;font-display:swap;src:url("fonts/Poppins-LightItalic.woff2") format("woff2");}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/Poppins-Regular.woff2") format("woff2");}
@font-face{font-family:"Poppins";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/Poppins-Italic.woff2") format("woff2");}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/Poppins-Medium.woff2") format("woff2");}
@font-face{font-family:"Poppins";font-style:italic;font-weight:500;font-display:swap;src:url("fonts/Poppins-MediumItalic.woff2") format("woff2");}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/Poppins-SemiBold.woff2") format("woff2");}
@font-face{font-family:"Poppins";font-style:italic;font-weight:600;font-display:swap;src:url("fonts/Poppins-SemiBoldItalic.woff2") format("woff2");}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/Poppins-Bold.woff2") format("woff2");}
@font-face{font-family:"Poppins";font-style:italic;font-weight:700;font-display:swap;src:url("fonts/Poppins-BoldItalic.woff2") format("woff2");}
@font-face{font-family:"Poppins";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/Poppins-ExtraBold.woff2") format("woff2");}
@font-face{font-family:"Poppins";font-style:italic;font-weight:800;font-display:swap;src:url("fonts/Poppins-ExtraBoldItalic.woff2") format("woff2");}
@font-face{font-family:"Poppins";font-style:normal;font-weight:900;font-display:swap;src:url("fonts/Poppins-Black.woff2") format("woff2");}
@font-face{font-family:"Poppins";font-style:italic;font-weight:900;font-display:swap;src:url("fonts/Poppins-BlackItalic.woff2") format("woff2");}
/* Mono: tracked uppercase tags, eyebrow labels, button labels. CDN. */
/* JetBrains Mono is loaded via a <link> tag in the page head (a mid-file @import is ignored by browsers). */

/* -- Color tokens (raw) -------------------------------------- */
:root {
  /* Brand */
  --rl-navy-900: #091B30;   /* deepest — slide bg, hero bg behind imagery */
  --rl-navy-800: #0F2A47;   /* primary text on light, large chips on dark */
  --rl-navy-700: #16365A;
  --rl-navy-600: #1F4773;
  --rl-navy-500: #2E5C8A;
  --rl-navy-400: #5778A1;   /* dim text on navy */

  --rl-mint-500: #2EC4A0;   /* primary action / accent */
  --rl-mint-400: #4FD5B5;   /* hover */
  --rl-mint-600: #21A687;   /* press */
  --rl-mint-100: #DCF5EC;   /* tints, soft surfaces */

  /* Neutrals */
  --rl-cream-50:  #F7F6F1;  /* canvas / light page */
  --rl-cream-100: #EFEDE4;
  --rl-cream-200: #E2DED1;
  --rl-slate-500: #5A6B78;  /* secondary text on light */
  --rl-slate-600: #3D4954;  /* tertiary text */
  --rl-white:     #FFFFFF;
  --rl-black:     #000000;

  /* Semantic */
  --rl-success:   #2EC4A0;  /* same as mint — performance / available */
  --rl-warn:      #E0A53A;  /* amber for load-management warnings */
  --rl-danger:    #C0504D;
  --rl-info:      #5778A1;

  /* Surface roles — LIGHT mode (default) */
  --bg-page:      var(--rl-cream-50);
  --bg-card:      var(--rl-white);
  --bg-sunken:    var(--rl-cream-100);
  --bg-inverse:   var(--rl-navy-900);

  --fg-1: var(--rl-navy-800);   /* primary text */
  --fg-2: var(--rl-slate-500);  /* secondary */
  --fg-3: #8896A2;              /* tertiary, captions */
  --fg-on-dark: var(--rl-white);
  --fg-on-mint: var(--rl-navy-900);
  --fg-accent:  var(--rl-mint-500);

  --border-1: var(--rl-cream-200);
  --border-2: rgba(15, 42, 71, 0.08);
  --border-inverse: rgba(255,255,255,0.14);

  /* Spacing scale (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* Radii — sharp-ish; CTA chips are pill, cards are 12–16. */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 24px;
  --r-pill: 999px;

  /* Borders */
  --bw-hair: 1px;
  --bw-1:    1.5px;
  --bw-thick: 2px;
  --bw-accent: 3px;       /* mint left-bar callouts */

  /* Shadows — used sparingly. Dark base wants glow more than drop. */
  --sh-1: 0 1px 2px rgba(9, 27, 48, 0.08);
  --sh-2: 0 4px 16px rgba(9, 27, 48, 0.10);
  --sh-3: 0 12px 32px rgba(9, 27, 48, 0.14);
  --sh-mint-glow: 0 0 0 1px rgba(46,196,160,0.35), 0 8px 28px rgba(46,196,160,0.25);

  /* Motion */
  --ease-out: cubic-bezier(.2,.7,.2,1); /* @kind other */
  --ease-snap: cubic-bezier(.5,1.5,.4,1); /* @kind other */
  --t-fast: 120ms; /* @kind other */
  --t-base: 200ms; /* @kind other */
  --t-slow: 360ms; /* @kind other */
}

/* -- Type tokens --------------------------------------------- */
:root {
  /* Unified single-typeface system — Montserrat everywhere (matches the
     hero headline). Display, body and tracked-label roles all resolve to
     Montserrat; only the weight/tracking differs per role. */
  --font-display: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-sans:    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Tracking conventions
     - display serif:   tight (-0.02em)
     - body sans:       normal
     - mono eyebrows:   wide (0.18–0.22em), uppercase
  */
  --tr-tight: -0.02em;
  --tr-snug:  -0.005em;
  --tr-normal: 0; /* @kind spacing */
  --tr-wide: 0.12em;
  --tr-wider: 0.18em;
  --tr-widest: 0.24em;
}

/* -- Semantic typography (applied as classes or composed) ---- */
.rl-display-1,
.rl-h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(56px, 7vw, 112px); line-height: 0.95; letter-spacing: var(--tr-tight); color: var(--fg-1); }
.rl-display-2,
.rl-h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 5vw, 72px);  line-height: 1.0;  letter-spacing: var(--tr-tight); color: var(--fg-1); }
.rl-h3  { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 1.05; letter-spacing: var(--tr-snug); color: var(--fg-1); }
.rl-h4  { font-family: var(--font-sans);    font-weight: 700; font-size: 24px; line-height: 1.2;  letter-spacing: var(--tr-snug); color: var(--fg-1); }
.rl-h5  { font-family: var(--font-sans);    font-weight: 700; font-size: 18px; line-height: 1.3;                                  color: var(--fg-1); }

.rl-lede   { font-family: var(--font-sans); font-weight: 400; font-size: 20px; line-height: 1.5; color: var(--fg-2); }
.rl-body   { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.55; color: var(--fg-1); }
.rl-body-sm{ font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 1.5;  color: var(--fg-2); }
.rl-caption{ font-family: var(--font-sans); font-weight: 500; font-size: 12px; line-height: 1.4;  color: var(--fg-3); }

/* Italic display emphasis — the “the next level.” treatment.
   Always paired with mint accent. */
.rl-em-italic { font-style: italic; color: var(--fg-accent); }

/* Mono eyebrow / tag / button label */
.rl-eyebrow {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--fg-accent);
}
.rl-eyebrow-sm {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
}
.rl-btn-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
}

/* -- Selection ----------------------------------------------- */
::selection { background: var(--rl-mint-500); color: var(--rl-navy-900); }