/**
 * Rogue Reigns — Design Tokens
 *
 * Naming convention aligned with the parent Venn site (public/css/styles.css)
 * so that a future migration to server-rendered views (Caminho C) is mostly
 * a path move, not a token rewrite.
 *
 * Two layers:
 *   1. Shared tokens — same names as parent (--bg-primary, --space-1, etc.)
 *      with Rogue-Reigns-appropriate values (dark fantasy palette).
 *   2. Game-specific tokens — namespaced --rr-* (gold gradients, Cinzel font).
 *
 * Spacing is rem-based for accessibility (scales with user font size).
 * The parent currently uses px; equivalent values, easy aliasing later.
 */

:root {
  color-scheme: dark;

  /* ========================================
     PALETTE — dark fantasy, gold accent
     ======================================== */
  --bg-primary:       #121212;
  --bg-secondary:     #1A1A1A;
  --surface:          rgba(18, 18, 18, 0.40);
  --surface-strong:   #1E1E1E;
  --border:           rgba(243, 243, 243, 0.08);
  --border-strong:    rgba(243, 243, 243, 0.15);
  --stroke:           #242424;

  --text-primary:     #F3F3F3;
  --text-secondary:   #CBCBCB;
  --text-muted:       rgba(243, 243, 243, 0.5);

  --accent:           #FED687;             /* gold — replaces parent's purple */
  --accent-deep:      #9A7340;
  --accent-soft:      #FFECC7;
  --accent-glow:      rgba(254, 214, 135, 0.3);

  --success:          #A6E3A1;
  --error:            #F38BA8;

  /* Rogue-Reigns-specific extensions */
  --rr-gold-deep:         #5C4025;
  /* Single source of truth for the polished-metal gold gradient — the same
     curve as the Figma export and the hero-text labels (ROGUE/MAGE/PALADIN/
     WARRIOR). 1deg ≈ vertical, with stops pushed ~118% outside the visible
     range so CSS interpolates a thin middle slice — gives a near-flat
     plateau with a soft tonal shift toward the bottom, no perceivable
     transition zone. Use this anywhere a gold gradient is needed. */
  --rr-gradient-gold:     linear-gradient(1deg, #CEA665 0%, #FAD284 100%);
  --rr-gradient-gold-alt: linear-gradient(1deg, #CEA665 0%, #FFECC7 100%);
  --rr-news-card-bg:      rgba(18, 18, 18, 0.40);

  /* ========================================
     TYPOGRAPHY
     ======================================== */
  --font-display: 'Cinzel', serif;        /* headings, eyebrows */
  --font-body:    'Lora', serif;           /* body copy */
  --font-mono:    ui-monospace, 'SFMono-Regular', monospace;

  /* Sizes — rem-based for accessibility */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.5rem;     /* 40px */
  --text-5xl:  3rem;       /* 48px */

  /* Line heights */
  --leading-tight:   1;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.75;

  /* Letter spacing */
  --tracking-tight:   -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.15em;

  /* ========================================
     SPACING — 8px grid with 4px half-steps
     Names mirror parent (--space-1, --space-1-5, etc.)
     ======================================== */
  --space-0-5: 0.25rem;   /* 4px */
  --space-1:   0.5rem;    /* 8px */
  --space-1-5: 0.75rem;   /* 12px */
  --space-2:   1rem;      /* 16px */
  --space-2-5: 1.25rem;   /* 20px */
  --space-3:   1.5rem;    /* 24px */
  --space-4:   2rem;      /* 32px */
  --space-5:   2.5rem;    /* 40px */
  --space-6:   3rem;      /* 48px */
  --space-7:   3.5rem;    /* 56px */
  --space-8:   4rem;      /* 64px */
  --space-10:  5rem;      /* 80px */
  --space-12:  6rem;      /* 96px */
  --space-16:  8rem;      /* 128px */
  --space-24:  12rem;     /* 192px */

  /* ========================================
     RADIUS, TRANSITIONS
     ======================================== */
  --radius:     8px;
  --radius-sm:  4px;
  --radius-lg:  12px;
  --radius-xl:  16px;

  --transition-fast: 150ms ease-out;
  --transition-base: 250ms ease-out;
  --transition-slow: 400ms ease-out;

  /* ========================================
     LAYOUT CONSTRAINTS
     ======================================== */
  --container-max:    90rem;       /* 1440px */
  --container-narrow: 71.25rem;    /* 1140px */

  --content-max:    81.625rem;     /* 1306px */
  --content-narrow: 54.375rem;     /*  870px */

  /* ========================================
     RESPONSIVE PADDING — mobile-first
     ======================================== */
  --padding-page-x:    1rem;       /* 16px */
  --padding-section-y: 3rem;       /* 48px */
  --padding-component: 1.5rem;     /* 24px */

  /* ========================================
     ASPECT RATIOS
     ======================================== */
  --aspect-hero:        16 / 9;
  --aspect-card:        4 / 3;
  --aspect-news-banner: 1440 / 465;
  --aspect-news-image:  922 / 519.09;

  /* ========================================
     Z-INDEX SCALE
     ======================================== */
  --z-base:           0;
  --z-dropdown:       1000;
  --z-sticky:         1020;
  --z-fixed:          1030;
  --z-modal-backdrop: 1040;
  --z-modal:          1050;
  --z-popover:        1060;
  --z-tooltip:        1070;
  --z-navbar:         9999;
}

/* Tablet+ */
@media (min-width: 768px) {
  :root {
    --padding-page-x:    4rem;     /* 64px */
    --padding-section-y: 6rem;     /* 96px */
  }
}

/* Desktop */
@media (min-width: 1024px) {
  :root {
    --padding-page-x: 8.5rem;      /* 136px */
  }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.container-responsive {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--padding-page-x);
  padding-right: var(--padding-page-x);
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--padding-page-x);
  padding-right: var(--padding-page-x);
}

.content-max    { max-width: var(--content-max); }
.content-narrow { max-width: var(--content-narrow); }

/* Responsive type — fluid with min/max */
.text-responsive-xs   { font-size: clamp(0.75rem,  1vw,   0.875rem); }
.text-responsive-sm   { font-size: clamp(0.875rem, 1.2vw, 1rem); }
.text-responsive-base { font-size: clamp(1rem,     1.5vw, 1.125rem); }
.text-responsive-lg   { font-size: clamp(1.125rem, 2vw,   1.25rem); }
.text-responsive-xl   { font-size: clamp(1.25rem,  2.5vw, 1.5rem); }
.text-responsive-2xl  { font-size: clamp(1.5rem,   3vw,   2rem); }
.text-responsive-3xl  { font-size: clamp(1.875rem, 4vw,   2.5rem); }
.text-responsive-4xl  { font-size: clamp(2.5rem,   5vw,   3rem); }
.text-responsive-5xl  { font-size: clamp(3rem,     6vw,   4rem); }

.section-spacing-y {
  padding-top:    var(--padding-section-y);
  padding-bottom: var(--padding-section-y);
}

.component-padding { padding: var(--padding-component); }

/* ========================================
   TYPOGRAPHY UTILITIES — replace inline-style
   font/color tokens that used to be JSON-bound
   ======================================== */
.rr-text {
  font-family: var(--font-body);
  color: var(--text-primary);
  font-feature-settings: 'liga' off, 'clig' off;
}

/* ----------------------------------------------------------------
   Default link hover for non-CTA text links (navbar, footer, body).
   Gradients can't be interpolated via CSS transition, so we render the
   gold gradient on a ::before pseudo using attr(data-text) and cross-fade
   its opacity. This avoids the abrupt color flip and works without JS.
   ---------------------------------------------------------------- */
.rr-link {
  font-family: var(--font-body);
  color: var(--text-primary);
  font-feature-settings: 'liga' off, 'clig' off;
  position: relative;
  isolation: isolate;
  transition: color 220ms ease;
}
.rr-link::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: var(--rr-gradient-gold);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.rr-link:hover,
.rr-link:focus-visible {
  color: transparent;
}
.rr-link:hover::before,
.rr-link:focus-visible::before {
  opacity: 1;
}

/* ----------------------------------------------------------------
   Site-wide hover pattern (non-CTA): solid white default → gold gradient
   on hover, cross-faded so there is no abrupt color flip. CSS cannot
   interpolate between a solid color and a gradient, so we stack two mask
   layers (::before white, ::after gradient) and fade ::after's opacity.

   Use for ANY non-CTA interactive element with a monochrome SVG icon
   (social links, footer link icons, etc). For text links use .rr-link
   (same idea, attr(data-text) instead of mask).

   Usage:
     <a><span class="rr-icon-fade" style="--icon-url: url('icon.svg')"></span></a>
   ---------------------------------------------------------------- */
.rr-icon-fade {
  position: relative;
  display: block;
  transition: transform 180ms ease;
}
.rr-icon-fade::before,
.rr-icon-fade::after {
  content: '';
  position: absolute;
  inset: 0;
  -webkit-mask: var(--icon-url, none) center / contain no-repeat;
          mask: var(--icon-url, none) center / contain no-repeat;
  transition: opacity 220ms ease;
  pointer-events: none;
}
.rr-icon-fade::before {
  background: var(--text-primary);
  opacity: 1;
}
.rr-icon-fade::after {
  background: var(--rr-gradient-gold);
  opacity: 0;
}
a:hover .rr-icon-fade::before,
button:hover .rr-icon-fade::before,
a:focus-visible .rr-icon-fade::before,
button:focus-visible .rr-icon-fade::before {
  opacity: 0;
}
a:hover .rr-icon-fade::after,
button:hover .rr-icon-fade::after,
a:focus-visible .rr-icon-fade::after,
button:focus-visible .rr-icon-fade::after {
  opacity: 1;
}
a:hover .rr-icon-fade,
button:hover .rr-icon-fade {
  transform: scale(1.12);
}

/* Static white icon (no hover effect) — for decorative icons that are not
   interactive (e.g. scroll-down hint inside a non-anchor parent). */
.rr-icon-white {
  background: var(--text-primary);
  -webkit-mask: var(--icon-url, none) center / contain no-repeat;
          mask: var(--icon-url, none) center / contain no-repeat;
  display: block;
}

.rr-display {
  font-family: var(--font-display);
  color: var(--text-primary);
  font-feature-settings: 'liga' off, 'clig' off;
  /* Figma "buttons-dropshadow" stack — gives heroes class labels (Rogue,
     Mage, Paladin, Warrior) and "The Cat" / hero title a paint-stamped
     depth. Filter (vs text-shadow) so it works whether the text fill is
     solid white (selected state) or gold-gradient via bg-clip:text
     (idle state). */
  filter:
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25))
    drop-shadow(0 6px 6px rgba(0, 0, 0, 0.21))
    drop-shadow(0 14px 8px rgba(0, 0, 0, 0.13))
    drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

/* Section title — exact Figma spec (desktop/title):
   - Cinzel 48px / 700 / line-height 100% (set per-instance via Tailwind)
   - liga/clig off
   - gold gradient clipped to text
   No text-shadow: matches the polished-metal feel of .hero-text-gold
   (which has none either) — the heavy "buttons-dropshadow" stack from
   Figma was creating a perceptual dark halo at letter bottoms that read
   as a gradient artifact, not as the engraved feel it intended. */
.rr-display-gold {
  font-family: var(--font-display);
  font-feature-settings: 'liga' off, 'clig' off;
  background: var(--rr-gradient-gold);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Figma "buttons-dropshadow" effect — stacked shadows give the gold
     title a paint-stamped depth feel. text-shadow is invisible on bg-
     clip:text (inherits text-fill-color: transparent), so use filter:
     drop-shadow which renders against the visible gradient instead. */
  filter:
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25))
    drop-shadow(0 6px 6px rgba(0, 0, 0, 0.21))
    drop-shadow(0 14px 8px rgba(0, 0, 0, 0.13))
    drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

/* Section eyebrow — exact Figma spec (desktop/eyebrow):
   Lora Medium 18px / line-height 100% / tracking 12% (≈2.16px at 18px) /
   color #F3F3F3 / uppercase. Size and tracking are applied per-instance
   via Tailwind so the same class works at any breakpoint. */
.rr-eyebrow {
  font-family: var(--font-body);
  color: var(--text-primary);
  font-weight: 500;
  text-transform: uppercase;
  font-feature-settings: 'liga' off, 'clig' off;
}

/* Body-text gold — Lora italic + gradient, no shadow / no small-caps.
   Distinct from .rr-display-gold which is for Cinzel section titles. */
.rr-text-gold {
  font-family: var(--font-body);
  background: var(--rr-gradient-gold);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-feature-settings: 'liga' off, 'clig' off;
}

/* Soft dark scrim behind a text block — radial gradient extending past the
   element via ::before. Used over busy splash images (e.g. Heroes
   description over the Paladin's bright shield) to guarantee readability
   without killing the artwork behind. */
.rr-text-scrim {
  isolation: isolate;
}
.rr-text-scrim::before {
  content: '';
  position: absolute;
  inset: -32px -48px;
  background: radial-gradient(
    ellipse 70% 85% at center,
    rgba(13, 13, 14, 0.78) 0%,
    rgba(13, 13, 14, 0.5) 50%,
    transparent 90%
  );
  z-index: -1;
  pointer-events: none;
}

/* Feathered edges — soft linear fade on all 4 sides so a splash blends
   into the dark page background. Reusable across sections (Lore, Heroes…).
   Per-side stops are exposed as CSS vars so individual instances can
   override one edge without rewriting the whole mask (e.g. Paladin needs
   a longer fade on the right to soften the bright golden shield). */
.rr-fade-feather {
  --fade-left:   8%;
  --fade-right:  92%;
  --fade-top:    10%;
  --fade-bottom: 90%;
  -webkit-mask-image:
    linear-gradient(to right,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.5) calc(var(--fade-left) * 0.5),
      #000 var(--fade-left),
      #000 var(--fade-right),
      rgba(0,0,0,0.5) calc((var(--fade-right) + 100%) / 2),
      rgba(0,0,0,0) 100%),
    linear-gradient(to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.5) calc(var(--fade-top) * 0.5),
      #000 var(--fade-top),
      #000 var(--fade-bottom),
      rgba(0,0,0,0.5) calc((var(--fade-bottom) + 100%) / 2),
      rgba(0,0,0,0) 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.5) calc(var(--fade-left) * 0.5),
      #000 var(--fade-left),
      #000 var(--fade-right),
      rgba(0,0,0,0.5) calc((var(--fade-right) + 100%) / 2),
      rgba(0,0,0,0) 100%),
    linear-gradient(to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.5) calc(var(--fade-top) * 0.5),
      #000 var(--fade-top),
      #000 var(--fade-bottom),
      rgba(0,0,0,0.5) calc((var(--fade-bottom) + 100%) / 2),
      rgba(0,0,0,0) 100%);
          mask-composite: intersect;
}

/* ========================================
   BREAKPOINTS — reference (Tailwind-aligned)
   sm:  640px
   md:  768px
   lg:  1024px
   xl:  1280px
   2xl: 1536px
   ======================================== */