/* =========================================================================
   Reimer Associates — Design Tokens
   Source: picostrap5 theme variables extracted from reimer.ca live CSS
   Scale built around primary navy #25468C and signature gold #F8CC0B
   ========================================================================= */
:root {
  /* ---------- Brand Palette (primary — Reimer Navy) ---------- */
  --rmr-navy-50:   #F0F2F7;
  --rmr-navy-100:  #E9EDF6;
  --rmr-navy-200:  #AEC4EA;
  --rmr-navy-300:  #7296DA;
  --rmr-navy-400:  #3667C9;
  --rmr-navy-500:  #25468C;      /* primary */
  --rmr-navy-600:  #1F3975;      /* hover / deeper chrome */
  --rmr-navy-700:  #16335B;      /* display-5 / text on white */
  --rmr-navy-800:  #122044;
  --rmr-navy-900:  #0C142C;

  /* Logo gradient stop (the lighter navy used inside the R mark) */
  --rmr-navy-logo: #2B4FA2;

  /* ---------- Secondary Palette (Reimer Gold) ---------- */
  --rmr-gold-50:  #FFFBEE;
  --rmr-gold-100: #FEF5CE;
  --rmr-gold-200: #FCEB9D;
  --rmr-gold-300: #FBE06D;
  --rmr-gold-400: #F9D63C;
  --rmr-gold-500: #F8CC0B;      /* secondary / highlight */
  --rmr-gold-600: #C6A309;
  --rmr-gold-700: #957A07;
  --rmr-gold-800: #635204;
  --rmr-gold-900: #322902;

  /* ---------- Neutrals ---------- */
  --rmr-white:    #FFFFFF;
  --rmr-light:    #F5F6F9;       /* page light fill — from --x-light */
  --rmr-gray-50:  #FAFAFA;
  --rmr-gray-100: #F7F8FA;
  --rmr-gray-200: #E7EAF0;
  --rmr-gray-300: #CFD6DF;
  --rmr-gray-400: #ABB6C5;
  --rmr-gray-500: #8898A9;
  --rmr-gray-600: #6B7B93;
  --rmr-gray-700: #525F7F;
  --rmr-gray-800: #2D3748;
  --rmr-gray-900: #1E2025;
  --rmr-dark:     #05070D;       /* --x-dark */
  --rmr-black:    #000000;

  /* Slate (text on primary surfaces — .text-slate-200 in live theme) */
  --rmr-slate-100: #EDF2F7;
  --rmr-slate-200: #E2E8F0;

  /* ---------- Semantic ---------- */
  --rmr-success: #038780;        /* teal — from --x-success */
  --rmr-info:    #3667C9;
  --rmr-warning: #F8CC0B;
  --rmr-danger:  #BC3846;        /* red — from --x-warning on live */

  /* ---------- Tokens ---------- */
  --rmr-primary:   var(--rmr-navy-500);
  --rmr-secondary: var(--rmr-gold-500);
  --rmr-accent:    var(--rmr-gold-500);
  /* Body text on light backgrounds — matches reimer.ca live (--x-body-color: #1e2025) */
  --rmr-ink:       var(--rmr-gray-900);
  --rmr-muted:     var(--rmr-gray-600);

  /* ---------- Type ---------- */
  --rmr-font-body:    "Montserrat", -apple-system, "Segoe UI", system-ui, sans-serif;
  --rmr-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --rmr-font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale, 1rem = 16px */
  --rmr-text-xs:   0.75rem;
  --rmr-text-sm:   0.875rem;
  --rmr-text-base: 1rem;
  --rmr-text-md:   1.125rem;
  --rmr-text-lg:   1.25rem;
  --rmr-text-xl:   1.5rem;
  --rmr-text-2xl:  1.75rem;
  --rmr-text-3xl:  2.25rem;
  --rmr-text-4xl:  3rem;
  --rmr-text-5xl:  3.75rem;
  --rmr-text-6xl:  4.5rem;

  --rmr-leading-tight: 1.15;
  --rmr-leading-snug:  1.3;
  --rmr-leading-base:  1.6;
  --rmr-leading-loose: 1.85;

  --rmr-weight-light:  300;
  --rmr-weight-normal: 400;
  --rmr-weight-semi:   500;
  --rmr-weight-bold:   700;
  --rmr-weight-black:  900;

  /* Letter spacing */
  --rmr-tracking-tight:  -0.02em;
  --rmr-tracking-normal: 0;
  --rmr-tracking-wide:   0.08em;
  --rmr-tracking-widest: 0.14em;

  /* ---------- Spacing (8pt system) ---------- */
  --rmr-space-0:  0;
  --rmr-space-1:  0.25rem;
  --rmr-space-2:  0.5rem;
  --rmr-space-3:  0.75rem;
  --rmr-space-4:  1rem;
  --rmr-space-5:  1.25rem;
  --rmr-space-6:  1.5rem;
  --rmr-space-8:  2rem;
  --rmr-space-10: 2.5rem;
  --rmr-space-12: 3rem;
  --rmr-space-16: 4rem;
  --rmr-space-20: 5rem;
  --rmr-space-24: 6rem;
  --rmr-space-32: 8rem;

  /* ---------- Radius (Reimer uses very tight corners — rounded-1, rounded-2) ---------- */
  --rmr-radius-sm: 2px;
  --rmr-radius:    4px;           /* rounded-1 */
  --rmr-radius-md: 8px;           /* rounded-2 */
  --rmr-radius-lg: 12px;
  --rmr-radius-xl: 16px;
  --rmr-radius-2xl: 24px;
  --rmr-radius-full: 9999px;

  /* ---------- Shadows (soft, slate-tinted) ---------- */
  --rmr-shadow-xs: 0 1px 2px rgba(22, 51, 91, .06);
  --rmr-shadow-sm: 0 1px 3px rgba(22, 51, 91, .08);
  --rmr-shadow:    0 4px 14px -2px rgba(22, 51, 91, .10), 0 2px 4px -2px rgba(22, 51, 91, .06);
  --rmr-shadow-lg: 0 16px 40px -8px rgba(22, 51, 91, .18), 0 4px 8px -4px rgba(22, 51, 91, .08);
  --rmr-shadow-xl: 0 32px 64px -16px rgba(22, 51, 91, .22);
  --rmr-shadow-soft-4: 0 6px 24px -4px rgba(22, 51, 91, .12);
  --rmr-shadow-soft-1: 0 1px 3px rgba(22, 51, 91, .06);
  --rmr-focus-ring: 0 0 0 3px rgba(37, 70, 140, .25);
  --rmr-focus-ring-gold: 0 0 0 3px rgba(248, 204, 11, .35);

  /* ---------- Layout ---------- */
  --rmr-container-sm: 720px;
  --rmr-container-md: 960px;
  --rmr-container-lg: 1280px;
  --rmr-container-xl: 1400px;
  --rmr-container-2xl: 1520px;

  /* ---------- Gradients ---------- */
  --rmr-grad-navy:  linear-gradient(180deg, #25468C 0%, #16335B 100%);
  --rmr-grad-dark:  linear-gradient(180deg, #16335B 0%, #0C142C 100%);
  --rmr-grad-gold:  linear-gradient(135deg, #F9D63C 0%, #F8CC0B 55%, #C6A309 100%);
  --rmr-grad-steel: linear-gradient(80deg, #25468C 0%, #3667C9 100%);
}