/* ==========================================================
   THE LENDING LAB — Design Tokens
   Extracted from logo: 3-tone blue flask + Castellar / Aptos Serif
   ========================================================== */

:root {

  /* --- COLOR PALETTE --- */

  /* Core brand blues (from flask icon) */
  --navy:       #1B3252;   /* Deep navy — flask base, building, primary text on light */
  --steel:      #2E6A96;   /* Medium steel — divider line, mid-tone accent */
  --blue:       #5B9BB8;   /* Flask body blue — secondary accent */
  --sky:        #8EC4D4;   /* Light sky — flask highlights, hover states */
  --frost:      #D6EBF2;   /* Very light blue — section backgrounds, table stripes */

  /* Neutrals */
  --ink:        #111827;   /* Near-black — primary body text */
  --graphite:   #374151;   /* Dark gray — secondary text, labels */
  --silver:     #9CA3AF;   /* Mid gray — muted, placeholders, captions */
  --mist:       #F3F7FA;   /* Off-white blue-tinted — section backgrounds */
  --white:      #FFFFFF;   /* Pure white */

  /* Gold accent — for CTAs, highlights (wealth management warmth) */
  --gold:       #C9A227;
  --gold-light: #F0D07A;
  --gold-dark:  #8C6F0F;

  /* Semantic */
  --color-primary:    var(--navy);
  --color-accent:     var(--gold);
  --color-bg:         var(--white);
  --color-bg-alt:     var(--mist);
  --color-bg-dark:    var(--navy);
  --color-text:       var(--ink);
  --color-text-muted: var(--graphite);
  --color-rule:       var(--steel);

  /* --- TYPOGRAPHY --- */

  /* Font stacks
     Primary: Castellar (Windows system — incised-caps display) for headings
              Aptos Serif (Windows 11 / Microsoft 365) for body
     Fallback: Google Fonts (Cinzel Decorative, Lora) for non-Windows / cross-platform
  */
  --font-display:  'Castellar', 'Cinzel Decorative', 'Trajan Pro', Georgia, serif;
  --font-heading:  'Castellar', 'Cinzel', 'Palatino Linotype', Georgia, serif;
  --font-body:     'Aptos Serif', 'Lora', 'Constantia', Georgia, serif;
  --font-sans:     'Aptos', 'Inter', 'Calibri', 'Helvetica Neue', Arial, sans-serif;

  /* Scale (Major Third: 1.25x) */
  --text-xs:   0.64rem;    /* 10.24px */
  --text-sm:   0.8rem;     /* 12.8px  */
  --text-base: 1rem;       /* 16px    */
  --text-md:   1.25rem;    /* 20px    */
  --text-lg:   1.563rem;   /* 25px    */
  --text-xl:   1.953rem;   /* 31.25px */
  --text-2xl:  2.441rem;   /* 39px    */
  --text-3xl:  3.052rem;   /* 48.8px  */
  --text-4xl:  3.815rem;   /* 61px    */
  --text-hero: 5rem;       /* 80px    */

  /* Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* Line heights */
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* Letter spacing */
  --tracking-display: 0.15em;   /* for Cinzel Decorative headings */
  --tracking-heading: 0.08em;
  --tracking-caps:    0.12em;
  --tracking-normal:  0;

  /* --- SPACING --- */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-8:  3rem;      /* 48px */
  --space-10: 4rem;      /* 64px */
  --space-12: 5rem;      /* 80px */
  --space-16: 8rem;      /* 128px */

  /* --- BORDERS & RADIUS --- */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  --border-thin:   1px solid var(--steel);
  --border-medium: 2px solid var(--steel);
  --border-heavy:  3px solid var(--navy);
  --border-gold:   2px solid var(--gold);
  --border-rule:   1px solid var(--frost);

  /* --- SHADOWS --- */
  --shadow-sm:  0 1px 3px rgba(27, 50, 82, 0.12);
  --shadow-md:  0 4px 16px rgba(27, 50, 82, 0.14);
  --shadow-lg:  0 8px 32px rgba(27, 50, 82, 0.18);
  --shadow-xl:  0 16px 48px rgba(27, 50, 82, 0.22);

  /* --- MOTION --- */
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter:      cubic-bezier(0, 0, 0.2, 1);
  --ease-exit:       cubic-bezier(0.4, 0, 1, 1);

  /* --- LAYOUT --- */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1200px;
  --container-2xl:  1400px;
  --section-pad-y:  var(--space-12);
  --section-pad-x:  var(--space-6);
}