/* =========================================================================
   Rogue North — Colors & Type
   Dark, minimal, design-forward. Beige halftone texture is the signature.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ---------- BASE COLORS ---------- */
  --rn-midnight:    #0B1A33;   /* primary dark background */
  --rn-black:       #050505;   /* deep black, for full-bleed sections */
  --rn-ink:         #0A1226;   /* between midnight & black, for cards */

  --rn-beige:       #E6D3B3;   /* core brand beige (logo) */
  --rn-beige-muted: #CBB79A;   /* secondary beige, halftone accents */
  --rn-beige-deep:  #8C7A5E;   /* dimmed beige, for low-contrast halftone */

  --rn-white:       #FFFFFF;   /* primary text */
  --rn-off-white:   #F5F1EA;   /* warm off-white, body copy on dark */
  --rn-gray:        #A0A0A0;   /* soft gray, secondary text */
  --rn-gray-dim:    #6B6B6B;   /* dim gray, captions, hairlines */
  --rn-gray-darker: #2A2D34;   /* hairline borders on dark */

  /* ---------- SEMANTIC: SURFACES ---------- */
  --rn-bg:           var(--rn-midnight);
  --rn-bg-deep:      var(--rn-black);
  --rn-bg-card:      #131C30;
  --rn-bg-elevated:  #18223A;

  /* ---------- SEMANTIC: FOREGROUNDS ---------- */
  --rn-fg:           var(--rn-white);          /* primary text */
  --rn-fg-soft:      var(--rn-off-white);      /* body */
  --rn-fg-muted:     var(--rn-gray);           /* secondary */
  --rn-fg-dim:       var(--rn-gray-dim);       /* captions */
  --rn-fg-accent:    var(--rn-beige);          /* highlights, brand */
  --rn-fg-accent-2:  var(--rn-beige-muted);

  /* ---------- BORDERS / DIVIDERS ---------- */
  --rn-border:       rgba(230, 211, 179, 0.12);  /* faint beige hairline */
  --rn-border-soft:  rgba(255, 255, 255, 0.06);
  --rn-border-strong:rgba(230, 211, 179, 0.30);

  /* ---------- TYPE ---------- */
  --rn-font-sans: 'Sora', 'Helvetica Neue', 'Söhne', Inter, system-ui, -apple-system, sans-serif;
  --rn-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* fluid scale, modular ratio ~1.25 */
  --rn-fs-display: clamp(56px, 9vw, 128px);
  --rn-fs-h1:      clamp(40px, 5.5vw, 72px);
  --rn-fs-h2:      clamp(28px, 3.6vw, 48px);
  --rn-fs-h3:      clamp(22px, 2.4vw, 32px);
  --rn-fs-h4:      20px;
  --rn-fs-body:    16px;
  --rn-fs-body-lg: 18px;
  --rn-fs-small:   14px;
  --rn-fs-micro:   12px;

  --rn-lh-tight:   1.05;
  --rn-lh-snug:    1.2;
  --rn-lh-normal:  1.5;
  --rn-lh-loose:   1.7;

  --rn-tr-tight:   -0.03em;   /* display / H1 */
  --rn-tr-snug:    -0.015em;  /* H2 / H3 */
  --rn-tr-normal:  0;
  --rn-tr-cta:     0.02em;    /* slightly tighter-confident CTAs */
  --rn-tr-eyebrow: 0.18em;    /* uppercase eyebrows */

  /* ---------- SPACING (8pt grid) ---------- */
  --rn-s-1:  4px;
  --rn-s-2:  8px;
  --rn-s-3:  12px;
  --rn-s-4:  16px;
  --rn-s-5:  24px;
  --rn-s-6:  32px;
  --rn-s-7:  48px;
  --rn-s-8:  64px;
  --rn-s-9:  96px;
  --rn-s-10:128px;

  /* ---------- RADII ---------- */
  --rn-r-0: 0;
  --rn-r-1: 2px;
  --rn-r-2: 4px;
  --rn-r-3: 8px;
  --rn-r-pill: 999px;

  /* ---------- SHADOW / GLOW ---------- */
  --rn-shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.45);
  --rn-shadow-2: 0 24px 60px rgba(0,0,0,0.55);
  --rn-glow-beige: 0 0 0 1px rgba(230,211,179,0.18), 0 8px 32px rgba(230,211,179,0.06);

  /* ---------- MOTION ---------- */
  --rn-ease:        cubic-bezier(0.2, 0.7, 0.2, 1);
  --rn-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --rn-dur-fast:    160ms;
  --rn-dur-base:    280ms;
  --rn-dur-slow:    520ms;
}

/* =========================================================================
   Element defaults
   ========================================================================= */
html, body {
  background: var(--rn-bg);
  color: var(--rn-fg);
  font-family: var(--rn-font-sans);
  font-size: var(--rn-fs-body);
  line-height: var(--rn-lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.rn-display {
  font-size: var(--rn-fs-display);
  line-height: var(--rn-lh-tight);
  letter-spacing: var(--rn-tr-tight);
  font-weight: 700;
}
h1, .rn-h1 {
  font-size: var(--rn-fs-h1);
  line-height: var(--rn-lh-tight);
  letter-spacing: var(--rn-tr-tight);
  font-weight: 700;
}
h2, .rn-h2 {
  font-size: var(--rn-fs-h2);
  line-height: var(--rn-lh-snug);
  letter-spacing: var(--rn-tr-snug);
  font-weight: 600;
}
h3, .rn-h3 {
  font-size: var(--rn-fs-h3);
  line-height: var(--rn-lh-snug);
  letter-spacing: var(--rn-tr-snug);
  font-weight: 500;
}
h4, .rn-h4 {
  font-size: var(--rn-fs-h4);
  font-weight: 500;
  letter-spacing: var(--rn-tr-snug);
}
p, .rn-body {
  font-size: var(--rn-fs-body);
  line-height: var(--rn-lh-loose);
  color: var(--rn-fg-soft);
}
.rn-body-lg {
  font-size: var(--rn-fs-body-lg);
  line-height: var(--rn-lh-loose);
  color: var(--rn-fg-soft);
}
.rn-eyebrow {
  font-size: var(--rn-fs-micro);
  letter-spacing: var(--rn-tr-eyebrow);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--rn-fg-accent);
}
.rn-caption {
  font-size: var(--rn-fs-small);
  color: var(--rn-fg-muted);
}
.rn-cta {
  letter-spacing: var(--rn-tr-cta);
  font-weight: 500;
}

/* =========================================================================
   Halftone — the signature visual layer.
   Beige dots fading from dense → sparse. Composed via radial-gradient tile.
   Use .rn-halftone with optional --dir (right|left|top|bottom).
   ========================================================================= */
.rn-halftone {
  --dot: rgba(230, 211, 179, 0.55);
  --tile: 12px;
  background-image:
    radial-gradient(circle, var(--dot) 1.4px, transparent 1.8px);
  background-size: var(--tile) var(--tile);
  background-position: 0 0;
}
.rn-halftone-fade-r {
  /* dense at right, sparse at left */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 90%);
          mask-image: linear-gradient(to right, transparent 0%, black 90%);
}
.rn-halftone-fade-l {
  -webkit-mask-image: linear-gradient(to left, transparent 0%, black 90%);
          mask-image: linear-gradient(to left, transparent 0%, black 90%);
}
.rn-halftone-fade-radial {
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
}

/* Subtle film grain — controlled, never noisy */
.rn-grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/></svg>");
}