/* ============================================================
   On the Road Again Lending — Design Tokens
   Brand system v3.0 "Meridian" · Trust-first consumer lending
   ------------------------------------------------------------
   The direction chosen by the client on 02 Sep 2026: white and
   cool gray surfaces, slate ink, one deep trust blue with one
   job, Geist for everything, light officer sidebar.
   Ports to Next.js verbatim. Product values live in config.js.
   Every text pair here clears WCAG AA (checked by script).
   ============================================================ */

:root {
  /* ---- Ink (slate navy) ---- */
  --navy-950: #080E1A;
  --navy-900: #0D1526;   /* ink / primary text */
  --navy-800: #182238;
  --navy-700: #232F4B;
  --navy-600: #2F3D60;
  --navy-100: #DCE2EF;
  --navy-050: #EEF1F7;

  /* ---- Action (trust blue) ---- */
  --blue-800: #122E86;
  --blue-700: #173BB0;   /* hover / links */
  --blue-600: #1F4FD8;   /* action / approval */
  --blue-500: #3D66E0;
  --blue-100: #DEE7FB;
  --blue-050: #EEF2FD;

  /* ---- Attention (amber, warning duty only) ---- */
  --amber-600: #8F5E04;
  --amber-500: #D89A34;
  --amber-400: #E8B45C;
  --amber-100: #F7ECD8;
  --amber-050: #FBF5E9;

  /* ---- Surfaces ---- */
  --gray-50: #F6F7F9;    /* page background */
  --gray-100: #EEF1F4;
  --white: #FFFFFF;
  --gray-200: #E4E8EE;   /* hairline borders */
  --gray-300: #D3DAE3;   /* input borders */
  --surface: var(--white);

  /* ---- Text ---- */
  --text-primary: var(--navy-900);
  --text-secondary: #46536A;
  --text-tertiary: #5D6B82;
  --text-inverse: #F4F6FA;
  --text-inverse-dim: #94A3BC;
  --text-inverse-faint: #6E7E9A;
  --text-on-action: #FFFFFF;    /* text on filled action/danger/navy */

  /* ---- Semantic status ----
     -fg is text on the tinted bg (AA), the base token remains
     the fill/dot/border color; -ink is body text on tints. */
  --status-success: #0C7A43;
  --status-success-bg: #E3F4EA;
  --status-success-ink: #0A5730;   /* 7.61:1 on -bg */
  --status-warning: #A96F0B;
  --status-warning-bg: #FBF1DA;
  --status-warning-fg: #8F5E04;
  --status-warning-ink: #5C4409;
  --status-danger: #C03434;
  --status-danger-bg: #FBE9E9;
  --status-danger-ink: #7A2020;
  --status-info: #1E3EAE;
  --status-info-bg: #E7EDFC;
  --status-neutral: #526078;
  --status-neutral-bg: #EDF0F4;

  /* ---- Credit grade chips A-E ---- */
  --grade-a: #0C7A43;
  --grade-b: #2F5C95;
  --grade-c: #8F5E04;
  --grade-d: #9C4F13;
  --grade-e: #C03434;

  /* ---- Typography ---- */
  --font-display: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-hero: clamp(2.6rem, 5.4vw, 4.2rem);
  --fs-h1: clamp(2rem, 3.6vw, 2.9rem);
  --fs-h2: clamp(1.55rem, 2.6vw, 2.1rem);
  --fs-h3: 1.3rem;
  --fs-h4: 1.05rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.78rem;
  --fs-2xs: 0.7rem;

  /* ---- Spacing ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ---- Radii ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---- Elevation (slate-tinted; action glow follows the blue) ---- */
  --shadow-xs: 0 1px 2px rgba(13, 21, 38, 0.06);
  --shadow-sm: 0 1px 3px rgba(13, 21, 38, 0.07), 0 4px 12px rgba(13, 21, 38, 0.05);
  --shadow-md: 0 2px 6px rgba(13, 21, 38, 0.06), 0 12px 28px rgba(13, 21, 38, 0.09);
  --shadow-lg: 0 4px 12px rgba(13, 21, 38, 0.08), 0 24px 56px rgba(13, 21, 38, 0.14);
  --shadow-action: 0 6px 20px rgba(31, 79, 216, 0.22);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 140ms;
  --dur-med: 220ms;
  --dur-slow: 380ms;

  /* ---- Layout ---- */
  --container: 1180px;
  --container-narrow: 880px;
  --sidebar-w: 248px;
  --header-h: 72px;

  /* ---- Third-party marks (colors fixed by their owners, not themed) ---- */
  --mark-visa: #1434CB;
  --mark-mc-red: #EB001B;
  --mark-mc-gold: #F79E1B;

  /* ---- Logo paint (otraLogo in app.js) ---- */
  --logo-tile: var(--navy-900);
  --logo-tile-edge: rgba(255, 255, 255, 0.08);
  --logo-road: #3E4C6E;
  --logo-dash: #5B79E3;
  --logo-dot: var(--blue-600);
  --logo-dot-ring: var(--gray-50);
}