/* ============================================================
   ROBB MACDONALD CRIMINAL DEFENCE — DESIGN TOKENS
   Colors + Typography + Spacing + Radii + Shadows
   ============================================================ */

/* Fonts are loaded via Google Fonts CDN — see fonts/README.md */
/* 2026 rebrand: Playfair Display (Art Deco high-contrast display serif) + */
/* Source Serif 4 (Source Serif Pro — readable body serif). Two-serif system. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,500&display=swap');

:root {
  /* ---------- BRAND COLORS (2026 crest rebrand) ---------- */
  --rm-midnight-navy: #0B1F3A;   /* primary brand, body bg-dark, primary CTA fill */
  --rm-steel-blue:    #163A63;   /* hover/secondary navy, link hover */
  --rm-charcoal:      #1A1A1D;   /* body text on light bg */
  --rm-silver-gray:   #C0C5CC;   /* muted text, secondary, "CRIMINAL DEFENCE" lockup */
  --rm-soft-white:    #F7F5F0;   /* Soft Ivory — warm section bg, subtle surface */
  --rm-border-gray:   #E6E1D6;   /* dividers, input borders, hairlines (warm) */

  /* ---------- ANTIQUE GOLD — metallic accent ---------- */
  /* Crest/heraldic accent. Used for eyebrows, diamond separators, stat numbers, */
  /* hairline rules, icon strokes, CTA accents. Restrained — never large fills.   */
  --rm-gold:        #B08D57;   /* primary antique gold (on light + on dark)       */
  --rm-gold-bright: #C8A86B;   /* lifted gold for on-navy numerals / hovers        */
  --rm-gold-deep:   #8A6C3C;   /* pressed / underlines on light                    */
  --rm-gold-soft:   rgba(176, 141, 87, 0.16); /* faint gold fill / focus tint      */

  /* Extended tints — derived for surfaces, hovers, depth */
  --rm-navy-95: #0E2745;   /* navy + 2% lift */
  --rm-navy-85: #1A3253;
  --rm-navy-15: #D6DCE5;   /* navy at low opacity, baked */
  --rm-navy-08: #ECEFF3;
  --rm-ink-70:  #4A4F58;   /* secondary body text on light */
  --rm-ink-50:  #6B7280;   /* tertiary, meta, captions */
  --rm-white:   #FFFFFF;

  /* ---------- SEMANTIC SURFACES ---------- */
  --rm-bg:               var(--rm-white);
  --rm-bg-subtle:        var(--rm-soft-white);
  --rm-bg-dark:          var(--rm-midnight-navy);
  --rm-bg-dark-elevated: var(--rm-navy-95);

  /* ---------- SEMANTIC TEXT ---------- */
  --rm-fg:           var(--rm-charcoal);       /* primary body */
  --rm-fg-muted:     var(--rm-ink-70);         /* secondary body */
  --rm-fg-subtle:    var(--rm-ink-50);         /* captions, meta */
  --rm-fg-on-dark:   var(--rm-white);          /* primary on navy */
  --rm-fg-on-dark-muted: var(--rm-silver-gray);/* secondary on navy, "CRIMINAL DEFENCE" treatment */

  --rm-border:       var(--rm-border-gray);
  --rm-border-strong: #D3CCBC;                 /* warm, harmonises with ivory */
  --rm-border-on-dark: rgba(255, 255, 255, 0.14);
  --rm-border-gold:    rgba(176, 141, 87, 0.45);
  --rm-border-gold-on-dark: rgba(200, 168, 107, 0.42);

  /* ---------- SEMANTIC ACCENT (antique gold) ---------- */
  --rm-accent:          var(--rm-gold);
  --rm-accent-on-dark:  var(--rm-gold-bright);

  --rm-link:         var(--rm-midnight-navy);
  --rm-link-hover:   var(--rm-steel-blue);

  /* No bright semantic accent colors. This brand reads success/error through */
  /* tone, not color — restrict to the cool palette. If needed:               */
  --rm-success: #2F5D3F;   /* deep forest, used sparingly                     */
  --rm-warn:    #8A6A1E;   /* aged brass, used sparingly                      */
  --rm-error:   #7A2222;   /* burgundy, used sparingly                        */

  /* ---------- TYPOGRAPHY — FAMILIES ---------- */
  /* --rm-font-display = headings (Playfair Display).                      */
  /* --rm-font-sans    = body. Name retained for compatibility, but it is  */
  /*                     now the Source Serif 4 body serif, not a sans.     */
  --rm-font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --rm-font-sans:    'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --rm-font-mono:    'SFMono-Regular', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* ---------- TYPOGRAPHY — SCALE ---------- */
  --rm-text-eyebrow:  12px;   /* uppercase, tracked +1.6px */
  --rm-text-xs:       12px;
  --rm-text-sm:       14px;
  --rm-text-base:     16px;
  --rm-text-md:       17px;   /* preferred body for marketing */
  --rm-text-lg:       19px;
  --rm-text-xl:       22px;   /* small headings, intro paragraph */
  --rm-text-2xl:      28px;
  --rm-text-3xl:      36px;   /* H2 sans section heading */
  --rm-text-4xl:      48px;   /* H1 small */
  --rm-text-5xl:      64px;   /* H1 hero */
  --rm-text-6xl:      84px;   /* display hero */

  /* ---------- LINE HEIGHTS ---------- */
  --rm-leading-tight:   1.08;
  --rm-leading-display: 1.06;
  --rm-leading-snug:    1.25;
  --rm-leading-normal:  1.55;
  --rm-leading-relaxed: 1.7;

  /* ---------- LETTER SPACING ---------- */
  --rm-tracking-display: -0.015em;   /* serif H1 — slight tighten */
  --rm-tracking-tight:   -0.01em;
  --rm-tracking-normal:  0;
  --rm-tracking-wide:    0.04em;
  --rm-tracking-eyebrow: 0.14em;     /* uppercase labels — wide */

  /* ---------- WEIGHTS ---------- */
  --rm-w-regular:  400;
  --rm-w-medium:   500;
  --rm-w-semibold: 600;
  --rm-w-bold:     700;
  --rm-w-extra:    800;

  /* ---------- SPACING (4px grid) ---------- */
  --rm-space-1:  4px;
  --rm-space-2:  8px;
  --rm-space-3:  12px;
  --rm-space-4:  16px;
  --rm-space-5:  20px;
  --rm-space-6:  24px;
  --rm-space-8:  32px;
  --rm-space-10: 40px;
  --rm-space-12: 48px;
  --rm-space-16: 64px;
  --rm-space-20: 80px;
  --rm-space-24: 96px;
  --rm-space-32: 128px;

  /* ---------- RADII ---------- */
  --rm-radius-none: 0;
  --rm-radius-sm:   2px;   /* default — restrained, legal/professional */
  --rm-radius-md:   4px;   /* inputs, buttons, small cards */
  --rm-radius-lg:   6px;   /* large cards */
  --rm-radius-pill: 999px; /* used sparingly — chips only */

  /* ---------- SHADOWS — quiet, never showy ---------- */
  --rm-shadow-xs:  0 1px 2px 0 rgba(11, 31, 58, 0.04);
  --rm-shadow-sm:  0 1px 3px 0 rgba(11, 31, 58, 0.06), 0 1px 2px 0 rgba(11, 31, 58, 0.04);
  --rm-shadow-md:  0 4px 12px -2px rgba(11, 31, 58, 0.08), 0 2px 4px -1px rgba(11, 31, 58, 0.04);
  --rm-shadow-lg:  0 16px 40px -12px rgba(11, 31, 58, 0.18), 0 4px 12px -2px rgba(11, 31, 58, 0.06);
  --rm-shadow-focus: 0 0 0 3px rgba(22, 58, 99, 0.18);

  /* ---------- LAYOUT ---------- */
  --rm-container:    1200px;
  --rm-container-sm: 880px;
  --rm-gutter:       24px;

  /* ---------- MOTION ---------- */
  --rm-ease:         cubic-bezier(0.2, 0.7, 0.2, 1);
  --rm-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --rm-duration-fast: 120ms;
  --rm-duration:      220ms;
  --rm-duration-slow: 420ms;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY CLASSES
   Use .rm-h1 / .rm-h2 / .rm-body / .rm-eyebrow / etc. on any tag.
   ============================================================ */

.rm-display,
.rm-h1 {
  font-family: var(--rm-font-display);
  font-weight: var(--rm-w-semibold);
  font-size: var(--rm-text-5xl);
  line-height: var(--rm-leading-display);
  letter-spacing: var(--rm-tracking-display);
  color: var(--rm-fg);
}

.rm-display {
  font-size: var(--rm-text-6xl);
}

.rm-h2 {
  font-family: var(--rm-font-display);
  font-weight: var(--rm-w-semibold);
  font-size: var(--rm-text-3xl);
  line-height: var(--rm-leading-tight);
  letter-spacing: var(--rm-tracking-tight);
  color: var(--rm-fg);
}

.rm-h3 {
  font-family: var(--rm-font-sans);
  font-weight: var(--rm-w-semibold);
  font-size: var(--rm-text-xl);
  line-height: var(--rm-leading-snug);
  letter-spacing: var(--rm-tracking-tight);
  color: var(--rm-fg);
}

.rm-lede {
  font-family: var(--rm-font-sans);
  font-weight: var(--rm-w-regular);
  font-size: var(--rm-text-xl);
  line-height: var(--rm-leading-snug);
  color: var(--rm-fg-muted);
}

.rm-body {
  font-family: var(--rm-font-sans);
  font-weight: var(--rm-w-regular);
  font-size: var(--rm-text-md);
  line-height: var(--rm-leading-relaxed);
  color: var(--rm-fg);
}

.rm-body-sm {
  font-family: var(--rm-font-sans);
  font-weight: var(--rm-w-regular);
  font-size: var(--rm-text-sm);
  line-height: var(--rm-leading-normal);
  color: var(--rm-fg-muted);
}

.rm-eyebrow {
  font-family: var(--rm-font-sans);
  font-weight: var(--rm-w-semibold);
  font-size: var(--rm-text-eyebrow);
  line-height: 1;
  letter-spacing: var(--rm-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--rm-fg-subtle);
}

.rm-meta {
  font-family: var(--rm-font-sans);
  font-weight: var(--rm-w-medium);
  font-size: var(--rm-text-xs);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--rm-fg-subtle);
}

.rm-quote {
  font-family: var(--rm-font-display);
  font-style: italic;
  font-weight: var(--rm-w-regular);
  font-size: var(--rm-text-2xl);
  line-height: var(--rm-leading-snug);
  color: var(--rm-fg);
}

/* On-dark variants */
.rm-on-dark { color: var(--rm-fg-on-dark); }
.rm-on-dark.rm-body,
.rm-on-dark.rm-lede { color: var(--rm-fg-on-dark-muted); }
.rm-on-dark.rm-eyebrow,
.rm-on-dark.rm-meta { color: var(--rm-silver-gray); }