/* ============================================================
   Rust Luzern — Colors & Type
   Refined from rust-luzern.ch (Rust orange + Luzern Wasserturm)
   ============================================================ */

/* Google Fonts — Inter (original) + JetBrains Mono (code/Rust feel) + Fraunces (editorial display) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,800;9..144,900&display=swap');

:root {
  /* =========================================================
     COLOR — PRIMARY (Rust oxidation palette)
     Anchored on #FF8C00 from the original site, extended into
     a full oxidation scale (fresh iron → heavy patina)
     ========================================================= */
  --rust-50:  #FFF4E6;   /* patina edge */
  --rust-100: #FFE2BD;
  --rust-200: #FFC680;
  --rust-300: #FFA640;
  --rust-400: #FF8C00;   /* signature rust orange */
  --rust-500: #E87500;
  --rust-600: #C85E00;
  --rust-700: #9C4600;   /* deep oxidation */
  --rust-800: #6B2F00;
  --rust-900: #3A1A00;

  /* =========================================================
     COLOR — NEUTRAL (ink on coal)
     Warm-biased blacks so they sit next to rust without fighting
     ========================================================= */
  --ink-0:    #0A0908;   /* deepest, page */
  --ink-50:   #121110;   /* primary surface (matches original #121212) */
  --ink-100:  #1C1A17;   /* card surface */
  --ink-200:  #2A2724;   /* elevated / hover */
  --ink-300:  #3A3631;   /* divider, border */
  --ink-400:  #5A5450;
  --ink-500:  #8A827B;   /* muted text */
  --ink-600:  #B8AFA6;
  --ink-700:  #D8CFC5;
  --ink-800:  #EBE4DA;
  --ink-900:  #F7F1E6;   /* paper / on-dark text */

  /* =========================================================
     COLOR — ACCENT (Luzern lake + sandstone, from mascot)
     The crab sits on a blue lake plinth; the tower is sandstone
     ========================================================= */
  --lake-400: #3A7BB5;   /* lake blue from mascot */
  --lake-500: #2C6395;
  --sand-300: #E8C988;   /* tower sandstone */
  --sand-400: #D4AC5C;
  --roof-500: #C25B2F;   /* tower roof terracotta */

  /* =========================================================
     COLOR — SEMANTIC
     ========================================================= */
  --success: #5FA85F;
  --warning: #E0A020;
  --danger:  #D94A3D;
  --info:    var(--lake-400);

  /* =========================================================
     COLOR — TOKENS (use these in components)
     ========================================================= */
  --bg:            var(--ink-0);
  --bg-elevated:   var(--ink-50);
  --surface:       var(--ink-100);
  --surface-hover: var(--ink-200);
  --border:        var(--ink-300);
  --border-strong: var(--ink-400);

  --fg:        var(--ink-900);
  --fg-muted:  var(--ink-600);
  --fg-subtle: var(--ink-500);

  --accent:         var(--rust-400);
  --accent-hover:   var(--rust-500);
  --accent-soft:    rgba(255, 140, 0, 0.14);
  --accent-glow:    rgba(255, 140, 0, 0.28);

  /* =========================================================
     TYPE — FAMILIES
     ========================================================= */
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', 'Inter', serif; /* editorial numerals & section heads */
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* =========================================================
     TYPE — SCALE (modular, 1.25 minor third)
     ========================================================= */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.375rem;  /* 22 */
  --text-xl:   1.75rem;   /* 28 */
  --text-2xl:  2.25rem;   /* 36 */
  --text-3xl:  3rem;      /* 48 */
  --text-4xl:  4rem;      /* 64 */
  --text-5xl:  5.5rem;    /* 88 */

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

  /* =========================================================
     RADII — two-tier (small for pills/inputs; minimal elsewhere)
     We intentionally pull BACK from the original's 12–16px
     everywhere in favor of flatter, more editorial cards.
     ========================================================= */
  --radius-sm: 2px;
  --radius-md: 4px;   /* default for cards */
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* =========================================================
     ELEVATION — subtle, no drop shadows on flat surfaces.
     Glow is reserved for the accent color on key CTAs.
     ========================================================= */
  --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.4), 0 0 0 1px var(--border);
  --shadow-md: 0 1px 0 rgba(0, 0, 0, 0.5), 0 0 0 1px var(--border-strong);
  --shadow-glow: 0 0 0 1px var(--rust-400), 0 0 32px -4px var(--accent-glow);

  /* =========================================================
     MOTION
     ========================================================= */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;
  --dur-med:  240ms;
  --dur-slow: 420ms;
}

/* ============================================================
   BASE / RESET-lite
   ============================================================ */
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: 'ss01', 'cv02', 'cv11';
}

/* ============================================================
   SEMANTIC TYPE
   ============================================================ */
.rl-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.rl-display,
h1.rl {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(var(--text-3xl), 5.5vw, var(--text-5xl));
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-variation-settings: 'opsz' 96;
  color: var(--fg);
  margin: 0;
}

.rl-h1, h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 72;
  margin: 0 0 var(--space-4);
}

.rl-h2, h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-3);
}

.rl-h3, h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
}

.rl-h4, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.3;
  margin: 0 0 var(--space-2);
}

.rl-body, p {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--fg);
  text-wrap: pretty;
  margin: 0 0 var(--space-4);
}

.rl-body-lg {
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--ink-700);
}

.rl-small, small {
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

.rl-mono, code, pre, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: 'ss02', 'zero';
}

code {
  padding: 0.12em 0.4em;
  background: var(--ink-100);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--rust-200);
}

/* Numerals — tabular by default for event times */
.rl-tabular { font-variant-numeric: tabular-nums; }

/* Links — underline-on-hover, orange */
a.rl, .rl a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
a.rl:hover, .rl a:hover {
  border-bottom-color: var(--accent);
}

/* Selection */
::selection { background: var(--accent); color: var(--ink-0); }