/* ============================================================
   Rejist Design System — Design Tokens
   Source: Wiselead Brand Guide v1.0 / colors_and_type.css
   Load AFTER Bootstrap, BEFORE app.css in index.html so that
   --bs-* overrides cascade correctly.
   ============================================================ */

:root {
  /* --- Brand palette --- */
  --rj-blue-1: #1f1c4e;   /* Navy — primary brand, wordmark, dark surfaces */
  --rj-blue-2: #1c65af;   /* Mid blue — links, primary actions */
  --rj-blue-3: #2699d3;   /* Sky blue — accents, focus glow, badge fills */
  --rj-blue-4: #92d7ef;   /* Pale blue — soft backgrounds, hover wash */
  --rj-ash:    #979583;   /* Warm grey — low-contrast labels */

  /* --- Neutral scale --- */
  --rj-white:        #ffffff;
  --rj-neutral-50:   #f7f8fb;
  --rj-neutral-100:  #eef1f6;
  --rj-neutral-200:  #dde2ec;
  --rj-neutral-300:  #c4cbd9;
  --rj-neutral-400:  #98a0b3;
  --rj-neutral-500:  #6b7388;
  --rj-neutral-600:  #4a5267;
  --rj-neutral-700:  #2f3548;
  --rj-neutral-800:  #1c2031;
  --rj-neutral-900:  #11142a;

  /* --- Semantic colors --- */
  --rj-success: #198a54;
  --rj-warning: #d08a00;
  --rj-danger:  #d14343;
  --rj-info:    var(--rj-blue-3);

  /* --- Surfaces --- */
  --rj-bg:           var(--rj-neutral-50);
  --rj-bg-elev:      var(--rj-white);
  --rj-bg-sunken:    var(--rj-neutral-100);
  --rj-bg-inverse:   var(--rj-blue-1);
  --rj-surface-pale: #eaf4fb;

  /* --- Text --- */
  --rj-fg-1:        var(--rj-neutral-900);
  --rj-fg-2:        var(--rj-neutral-700);
  --rj-fg-3:        var(--rj-neutral-500);
  --rj-fg-4:        var(--rj-neutral-400);
  --rj-fg-on-brand: var(--rj-white);
  --rj-fg-link:     var(--rj-blue-2);

  /* --- Borders --- */
  --rj-border:        var(--rj-neutral-200);
  --rj-border-strong: var(--rj-neutral-300);
  --rj-border-focus:  var(--rj-blue-3);

  /* --- Typography --- */
  --rj-font-sans:    "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rj-font-display: "Bebas Neue", "DM Sans", sans-serif;
  --rj-font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --rj-feature-settings: "liga" 0, "clig" 0;

  /* --- Type scale (1.25 modular) --- */
  --rj-fs-12: 0.75rem;
  --rj-fs-13: 0.8125rem;
  --rj-fs-14: 0.875rem;
  --rj-fs-15: 0.9375rem;
  --rj-fs-16: 1rem;
  --rj-fs-18: 1.125rem;
  --rj-fs-20: 1.25rem;
  --rj-fs-24: 1.5rem;
  --rj-fs-30: 1.875rem;
  --rj-fs-36: 2.25rem;
  --rj-fs-48: 3rem;

  --rj-lh-tight:   1.15;
  --rj-lh-snug:    1.3;
  --rj-lh-normal:  1.5;
  --rj-lh-relaxed: 1.65;

  --rj-tracking-display: -0.01em;
  --rj-tracking-bebas:    0.04em;
  --rj-tracking-eyebrow:  0.16em;

  /* --- Spacing (4-step base) --- */
  --rj-space-1:  4px;
  --rj-space-2:  8px;
  --rj-space-3:  12px;
  --rj-space-4:  16px;
  --rj-space-5:  20px;
  --rj-space-6:  24px;
  --rj-space-8:  32px;
  --rj-space-10: 40px;
  --rj-space-12: 48px;
  --rj-space-16: 64px;

  /* --- Radii --- */
  --rj-radius-xs:   4px;
  --rj-radius-sm:   6px;
  --rj-radius-md:   10px;
  --rj-radius-lg:   14px;
  --rj-radius-xl:   20px;
  --rj-radius-2xl:  28px;
  --rj-radius-pill: 999px;

  /* --- Shadows / elevation --- */
  --rj-shadow-1:     0 1px 2px rgba(17, 20, 42, 0.06);
  --rj-shadow-2:     0 6px 20px rgba(31, 28, 78, 0.08);
  --rj-shadow-3:     0 16px 40px rgba(31, 28, 78, 0.14);
  --rj-shadow-focus: 0 0 0 4px rgba(38, 153, 211, 0.22);

  /* --- Motion --- */
  --rj-ease:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --rj-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --rj-dur-fast: 140ms;
  --rj-dur-base: 220ms;
  --rj-dur-slow: 420ms;

  /* =====================================================
     Bootstrap 5 custom-property overrides
     Maps --bs-* to Rejist design tokens so that all
     Blazor components inherit the correct brand palette
     without a full CSS rewrite.
     ===================================================== */
  --bs-primary:             var(--rj-blue-2);
  --bs-primary-rgb:         28, 101, 175;
  --bs-link-color:          var(--rj-blue-2);
  --bs-link-color-rgb:      28, 101, 175;
  --bs-link-hover-color:    var(--rj-blue-1);
  --bs-link-hover-color-rgb: 31, 28, 78;
  --bs-success:             var(--rj-success);
  --bs-warning:             var(--rj-warning);
  --bs-danger:              var(--rj-danger);
  --bs-info:                var(--rj-blue-3);
  --bs-body-font-family:    var(--rj-font-sans);
  --bs-body-color:          var(--rj-fg-1);
  --bs-body-bg:             var(--rj-bg);
  --bs-border-color:        var(--rj-border);
  --bs-border-color-translucent: rgba(31, 28, 78, 0.12);
  --bs-border-radius:       var(--rj-radius-sm);
  --bs-border-radius-lg:    var(--rj-radius-md);
  --bs-border-radius-xl:    var(--rj-radius-lg);
  --bs-border-radius-pill:  var(--rj-radius-pill);
  --bs-focus-ring-color:    rgba(38, 153, 211, 0.22);
  --bs-primary-bg-subtle:   rgba(28, 101, 175, 0.08);
  --bs-primary-border-subtle: rgba(28, 101, 175, 0.25);
  --bs-primary-text-emphasis: var(--rj-blue-1);
}