/**
 * Design Tokens — single source of truth for the Boutique Finance theme.
 *
 * Every color, font, size, space and radius used across the theme is defined
 * here as a CSS custom property. Section/component CSS MUST reference these
 * variables (var(--token)) rather than hard-coding hex values, so the whole
 * palette can be retuned from one place.
 *
 * Derived from the Figma spec: "Boutique Finance - Home Page Option 2".
 */

:root {
    /* ---------- Color: Navy family ---------- */
    --color-navy-deep:    #102A43; /* hero, header outer, FAQs, footer */
    --color-navy-mid:     #1C3153; /* dark sections, cards, body text on light */
    --color-navy-darkest: #091E42; /* strokes / borders */

    /* ---------- Color: Gold accent ---------- */
    --color-gold:        #C6A15B; /* labels, CTA stop 1, highlight text */
    --color-gold-light:  #E2C986; /* CTA gradient stop 2 */
    --color-gold-dark:   #B8924A; /* hover darken */
    --color-gold-darker: #A8823B; /* active darken */
    --gradient-gold:        linear-gradient(90deg, #C6A15B 0%, #E2C986 100%);
    --gradient-gold-hover:  linear-gradient(90deg, #B8924A 0%, #D4B870 100%);
    --gradient-gold-active: linear-gradient(90deg, #A8823B 0%, #C4A860 100%);
    /* Richer 4-stop shimmer for gold gradient TEXT (hero "Boutique Touch"), per Figma. */
    --gradient-gold-text:   linear-gradient(90deg, #C6A15B 0%, #E2C986 38%, #F7E6B9 55%, #C6A15B 98%);
    /* Same shimmer, DIAGONAL top-left → bottom-right (team "Meet The Stars of Boutique"), per Figma. */
    --gradient-gold-text-diagonal: linear-gradient(135deg, #C6A15B 0%, #E2C986 38%, #F7E6B9 55%, #C6A15B 98%);
    /* 4-stop gold gradient for the "Let's Talk" pill STROKE/border, per Figma. */
    --gradient-gold-stroke: linear-gradient(90deg, #C6A15B 0%, #E2C986 30%, #E2C986 70%, #C6A15B 100%);
    /* "Let's Talk" pill FILL on hover, per Figma (light gold from 40% onward). */
    --gradient-gold-fill:   linear-gradient(90deg, #C6A15B 0%, #E2C986 40%);
    /* Testimonial card BORDER — gold, dark → light → lightest (Figma). */
    --gradient-gold-border: linear-gradient(90deg, #C6A15B 0%, #E2C986 50%, #F7E6B9 100%);

    /* ---------- Color: Light / neutral ---------- */
    --color-off-white:  #F7F9F8; /* text on dark, light elements */
    --color-page-bg:    #F9F9F9; /* page background, light buttons */
    --color-mint-light: #E6F4F3; /* muted text on dark, subtle tint */
    --color-cream:      #EFEFE3; /* subtle backgrounds */
    --color-cream-card: #FAF9F6; /* testimonial card fill */
    --color-card-grey:  #EFEEF3; /* "How We Work" step cards */
    --color-card-light: #F9FAFB; /* Residential Lending service cards (default fill) */
    --color-text-muted: #6B7280; /* grey body/excerpt on light */
    --color-ink-teal:   #0C3D46; /* Contact card text (deep teal) */

    /* Service card hover fill — mint → off-white, top-right to bottom-left (Figma). */
    --gradient-card-hover: linear-gradient(225deg, var(--color-mint-light) 0%, var(--color-off-white) 100%);

    /* Step band accent — How We Work step 02 (Figma). */
    --color-step-teal: #007C7A;

    /* Translucent surfaces used on dark sections */
    --surface-on-dark:        rgba(255, 255, 255, 0.08);
    --surface-on-dark-border: rgba(255, 255, 255, 0.15);

    /* ---------- Typography ---------- */
    --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
    --font-body:    'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    --font-roboto:  'Roboto', 'Helvetica Neue', Arial, sans-serif; /* header CTA, footer legal text */
    --font-jakarta: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif; /* footer copyright */
    --font-cta:     var(--font-roboto);

    /* Type scale (desktop). Sections may step these down responsively. */
    --fs-hero:   82px;  --lh-hero: 1.07;
    --fs-h2:     48px;  --lh-h2:   1.1;
    --fs-h3:     32px;
    --fs-body:   18px;  --lh-body: 1.6;
    --fs-label:  14px;  /* eyebrow / section labels */
    --fs-small:  14px;
    --fs-nav:    15px;
    --fs-btn:    15px;

    --weight-light:    300;
    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* ---------- Layout & spacing ---------- */
    --frame-width:       1440px;
    --header-sticky-h:   146px; /* sticky header height (card 106 + 2×20 padding) */
    --content-max:       1315px; /* section content */
    --content-narrow:    1142px; /* How We Work / Blogs */
    --header-card-width: 1165px;
    --side-padding:      64px;
    --section-padding-v: 56px;

    /* ---------- Radii ---------- */
    --radius-btn:      8px;
    --radius-card:     16px;
    --radius-section:  20px;
    --radius-pill:     30px;

    /* ---------- Elevation ---------- */
    --shadow-card:      0 4px 24px rgba(16, 42, 67, 0.15);
    --shadow-gold:      0 6px 20px rgba(198, 161, 91, 0.45);
    --shadow-gold-soft: 0 2px 8px rgba(198, 161, 91, 0.30);

    /* ---------- Motion ---------- */
    --transition: all 0.3s ease;
}