/* ── Finly Design Tokens ─────────────────────────────────────────────────── */
/* Synced from LoanBrain static/ds/tokens.css on 2026-04-11 — verbatim copy  */
/* Three-tier architecture: Primitive → Semantic → Component                 */
/* Components reference only semantic tokens. Semantic tokens reference      */
/* primitives. When the theme changes, only the semantic layer swaps.        */


/* ══ TIER 1 — PRIMITIVES ════════════════════════════════════════════════════ */
/* Raw values. Never referenced directly by components.                       */

:root {
    /* Brand Primitives (from Finly brand guide — canonical) */
    --color-whisper-white:  #FAFAF6;
    --color-charcoal-black: #191818;
    --color-moss-green:     #49663A;
    --color-sunbeam-yellow: #FFC530;
    --color-blossom-pink:   #F096C4;
    --color-sky-mist:       #A5C1D7;
    --color-soft-sand:      #D3D1B9;
    --color-warm-tint:      #F0EFE5;

    /* Neutral Primitives */
    --color-gray-100: #F5F4F0;
    --color-gray-200: #E2E1D2;
    --color-gray-300: #D3D1B9;
    --color-gray-400: #A8A69E;
    --color-gray-500: #6B6B6B;
    --color-gray-600: #4A4A48;
    --color-gray-700: #333331;
    --color-gray-800: #252320;
    --color-gray-900: #191818;

    /* Dark Mode Surface Primitives */
    --color-dark-bg:               #1E1C19;
    --color-dark-surface:          #252320;
    --color-dark-surface-elevated: #2D2B27;
    --color-dark-surface-high:     #353330;
    --color-dark-border:           #3D3B37;
    --color-dark-border-subtle:    #2F2D2A;

    /* Dark Mode Brand Adjustments (lightened for contrast) */
    --color-moss-green-light:     #6B8F5A;
    --color-sunbeam-yellow-light: #FFD054;
    --color-blossom-pink-light:   #F5A8D0;
    --color-sky-mist-light:       #BDD4E5;
    --color-soft-sand-light:      #8A8775;

    /* Danger */
    --color-danger-base: #DC2626;
    --color-danger-dark: #EF5350;

    /* Tertiary */
    --color-tertiary-purple:      #8B44CC;
    --color-tertiary-purple-dark: #C084FC;

    /* Extended Neutral */
    --color-gray-50: #FAFAF8;

    /* M3 Dark Tonal Surface Levels (numbered) */
    --color-dark-surface-1: #1F211D;
    --color-dark-surface-2: #242620;
    --color-dark-surface-3: #272921;
    --color-dark-surface-4: #2A2C24;
    --color-dark-surface-5: #2D3026;
}


/* ══ TIER 2 — SEMANTIC TOKENS ═══════════════════════════════════════════════ */
/* Role-based. This is what components reference.                             */

/* ── Light Mode (default) ── */
:root,
[data-theme="light"] {
    /* Surfaces */
    --surface-primary:        var(--color-whisper-white);
    --surface-card:           #FFFFFF;
    --surface-card-hover:     #F5F4F0;
    --surface-elevated:       var(--color-warm-tint);
    --surface-raised:         #F7F6F2;
    --surface-container-high: #EEECEA;
    --surface-overlay:        rgba(25, 24, 24, 0.5);

    /* Banner — tonal hero zone (light sage gradient mesh base) */
    --surface-banner:         #EBF0E6;

    /* Banner semantic tokens — dark text on light surface */
    --banner-text-primary:    var(--color-charcoal-black);
    --banner-text-secondary:  var(--color-gray-500);
    --banner-text-muted:      #767676;
    --banner-divider:         rgba(25,24,24,0.10);
    --banner-chip-bg:         rgba(25,24,24,0.04);
    --banner-chip-border:     rgba(25,24,24,0.10);
    --banner-btn-bg:          rgba(25,24,24,0.05);
    --banner-btn-bg-hover:    rgba(25,24,24,0.09);
    --banner-btn-border:      rgba(25,24,24,0.12);
    --banner-btn-border-hover: rgba(25,24,24,0.20);
    --avatar-ring:            rgba(73,102,58,0.20);
    --avatar-shadow:          rgba(0,0,0,0.08);

    /* Text */
    --text-primary:   var(--color-charcoal-black);
    --text-secondary: var(--color-gray-500);
    /* [MD3-FIX A-8] Darkened from #999 (2.85:1) to #767676 (4.54:1) — WCAG AA */
    --text-muted:     #767676;
    --text-inverse:   #FFFFFF;

    /* Borders */
    --border-default: var(--color-gray-200);
    --border-subtle:  var(--color-gray-100);

    /* Status */
    --status-success:       var(--color-moss-green);
    --status-success-light: #EAF0E6;
    --status-warning:       var(--color-sunbeam-yellow);
    --status-warning-light: #FDF5E0;
    --status-error:         var(--color-blossom-pink);
    --status-error-light:   #FDE8F1;
    --status-info:          var(--color-sky-mist);
    --status-info-light:    #E8F2FB;
    --status-danger:        var(--color-danger-base);
    --status-danger-light:  #FEE2E2;
    --status-neutral:       var(--color-gray-500);
    --status-neutral-light: var(--color-gray-100);

    /* Status On-tokens — text on colored pill backgrounds */
    --status-warning-on:    #6B4400;
    --status-error-on:      #7A1A4A;
    --status-info-on:       #1A4F6E;

    /* Banner pill tokens — light-surface context (dark text on sage) */
    --pill-banner-service-bg:     rgba(73,102,58,0.12);
    --pill-banner-service-color:  #2D4222;
    --pill-banner-service-border: rgba(73,102,58,0.22);
    --pill-banner-alert-bg:       rgba(220,38,38,0.08);
    --pill-banner-alert-color:    #991B1B;
    --pill-banner-alert-border:   rgba(220,38,38,0.18);
    --pill-banner-warning-bg:     rgba(180,130,0,0.10);
    --pill-banner-warning-color:  #92400E;
    --pill-banner-warning-border: rgba(180,130,0,0.18);

    /* Banner summary badge tokens — light-surface context */
    --badge-banner-green-bg:      rgba(73,102,58,0.10);
    --badge-banner-green-color:   #2D4222;
    --badge-banner-green-border:  rgba(73,102,58,0.20);
    --badge-banner-yellow-bg:     rgba(180,130,0,0.08);
    --badge-banner-yellow-color:  #92400E;
    --badge-banner-yellow-border: rgba(180,130,0,0.16);
    --badge-banner-red-bg:        rgba(220,38,38,0.06);
    --badge-banner-red-color:     #991B1B;
    --badge-banner-red-border:    rgba(220,38,38,0.14);
    --badge-banner-blue-bg:       rgba(37,99,135,0.08);
    --badge-banner-blue-color:    #1A4F6E;
    --badge-banner-blue-border:   rgba(37,99,135,0.16);

    /* Accent */
    --accent-primary:              var(--color-moss-green);
    --accent-primary-hover:        #3D5730;
    --accent-primary-container:    #D4E8CB;
    --accent-on-primary:           #FFFFFF;
    --accent-on-primary-container: #0F2009;
    --accent-sand:                 var(--color-soft-sand);

    /* M3 Elevation — shadow-based in light mode */
    --elevation-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
    --elevation-2: 0 1px 3px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.06);
    --elevation-3: 0 2px 6px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.07);

    /* Shadows (aliased to elevation) */
    --shadow-sm: var(--elevation-1);
    --shadow-md: var(--elevation-3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10);

    /* Lifecycle Status Colors */
    --status-lead:         var(--color-gray-400);
    --status-booked:       var(--color-sky-mist);
    --status-consultation: var(--color-sunbeam-yellow);
    --status-consult:      var(--color-sunbeam-yellow);
    --status-nurturing:    var(--color-sunbeam-yellow);
    --status-engaged:      var(--color-moss-green);
    --status-client:       var(--color-moss-green);
    --status-legacy:       var(--color-soft-sand);
    --status-re_nurturing: var(--color-blossom-pink);
    --status-returning:    var(--color-sky-mist);

    /* Lifecycle Tinted Fills (12% opacity — badge/chip backgrounds) */
    --status-lead-light:         rgba(168, 166, 158, 0.12);
    --status-booked-light:       rgba(165, 193, 215, 0.12);
    --status-consultation-light: rgba(255, 197,  48, 0.12);
    --status-consult-light:      rgba(255, 197,  48, 0.12);
    --status-nurturing-light:    rgba(255, 197,  48, 0.12);
    --status-engaged-light:      rgba( 73, 102,  58, 0.12);
    --status-client-light:       rgba( 73, 102,  58, 0.12);
    --status-legacy-light:       rgba(211, 209, 185, 0.12);
    --status-re_nurturing-light: rgba(240, 150, 196, 0.12);
    --status-returning-light:    rgba(165, 193, 215, 0.12);
}

/* ── Dark Mode ── */
[data-theme="dark"] {
    /* Surfaces (elevation via tint, not shadow) */
    --surface-primary:        var(--color-dark-bg);
    --surface-card:           var(--color-dark-surface-1);
    --surface-card-hover:     var(--color-dark-surface-2);
    --surface-elevated:       var(--color-dark-surface-2);
    --surface-raised:         var(--color-dark-surface-3);
    --surface-container-high: var(--color-dark-surface-4);
    --surface-overlay:        rgba(0, 0, 0, 0.6);

    /* Banner — dark tonal surface in dark mode */
    --surface-banner:         #2A2E24;

    /* Banner semantic tokens — light text on dark surface */
    --banner-text-primary:    #E3E3DC;
    --banner-text-secondary:  #C6C4BC;
    --banner-text-muted:      #8F8D85;
    --banner-divider:         rgba(255,255,255,0.10);
    --banner-chip-bg:         rgba(255,255,255,0.08);
    --banner-chip-border:     rgba(255,255,255,0.12);
    --banner-btn-bg:          rgba(255,255,255,0.10);
    --banner-btn-bg-hover:    rgba(255,255,255,0.16);
    --banner-btn-border:      rgba(255,255,255,0.15);
    --banner-btn-border-hover: rgba(255,255,255,0.25);
    --avatar-ring:            rgba(255,255,255,0.25);
    --avatar-shadow:          rgba(0,0,0,0.35);

    /* Text (M3 dark — higher contrast than original) */
    --text-primary:   #E3E3DC;
    --text-secondary: #C6C4BC;
    --text-muted:     #8F8D85;
    --text-inverse:   var(--color-charcoal-black);

    /* Borders */
    --border-default: var(--color-dark-border);
    --border-subtle:  var(--color-dark-border-subtle);

    /* Status (lightened for dark bg contrast) */
    --status-success:       var(--color-moss-green-light);
    --status-success-light: rgba(107, 143, 90, 0.16);
    --status-warning:       var(--color-sunbeam-yellow-light);
    --status-warning-light: rgba(255, 208, 84, 0.14);
    --status-error:         var(--color-blossom-pink-light);
    --status-error-light:   rgba(245, 168, 208, 0.14);
    --status-info:          var(--color-sky-mist-light);
    --status-info-light:    rgba(189, 212, 229, 0.14);
    --status-danger:        var(--color-danger-dark);
    --status-danger-light:  rgba(239, 83, 80, 0.14);
    --status-neutral:       #9A9890;
    --status-neutral-light: rgba(255, 255, 255, 0.06);

    /* Status On-tokens — lightened for dark surfaces */
    --status-warning-on:    #FFD054;
    --status-error-on:      #F5A8D0;
    --status-info-on:       #BDD4E5;

    /* Banner pill/badge tokens — light text on dark surface */
    --pill-banner-service-bg:     rgba(212,232,203,0.18);
    --pill-banner-service-color:  #C8E6B8;
    --pill-banner-service-border: rgba(212,232,203,0.25);
    --pill-banner-alert-bg:       rgba(220,38,38,0.20);
    --pill-banner-alert-color:    #FCA5A5;
    --pill-banner-alert-border:   rgba(220,38,38,0.30);
    --pill-banner-warning-bg:     rgba(255,197,48,0.18);
    --pill-banner-warning-color:  #FFD878;
    --pill-banner-warning-border: rgba(255,197,48,0.25);

    /* Banner summary badge tokens — light text on dark surface */
    --badge-banner-green-bg:      rgba(73,102,58,0.25);
    --badge-banner-green-color:   #A8D090;
    --badge-banner-green-border:  rgba(73,102,58,0.35);
    --badge-banner-yellow-bg:     rgba(255,197,48,0.15);
    --badge-banner-yellow-color:  #FFD878;
    --badge-banner-yellow-border: rgba(255,197,48,0.25);
    --badge-banner-red-bg:        rgba(220,38,38,0.15);
    --badge-banner-red-color:     #FCA5A5;
    --badge-banner-red-border:    rgba(220,38,38,0.25);
    --badge-banner-blue-bg:       rgba(165,193,215,0.15);
    --badge-banner-blue-color:    #BDD4E5;
    --badge-banner-blue-border:   rgba(165,193,215,0.25);

    /* Accent */
    --accent-primary:              var(--color-moss-green-light);
    --accent-primary-hover:        #7DA06B;
    --accent-primary-container:    rgba(107, 143, 90, 0.2);
    --accent-on-primary:           var(--color-charcoal-black);
    --accent-on-primary-container: #D4E8CB;
    --accent-sand:                 var(--color-soft-sand-light);

    /* M3 Elevation — none in dark mode (tonal surfaces handle elevation) */
    --elevation-1: none;
    --elevation-2: none;
    --elevation-3: none;

    /* Lifecycle (lightened brand primitives for dark bg) */
    --status-lead:         var(--color-gray-400);
    --status-booked:       var(--color-sky-mist-light);
    --status-consultation: var(--color-sunbeam-yellow-light);
    --status-consult:      var(--color-sunbeam-yellow-light);
    --status-nurturing:    var(--color-sunbeam-yellow-light);
    --status-engaged:      var(--color-moss-green-light);
    --status-client:       var(--color-moss-green-light);
    --status-legacy:       var(--color-soft-sand-light);
    --status-re_nurturing: var(--color-blossom-pink-light);
    --status-returning:    var(--color-sky-mist-light);

    /* Lifecycle Tinted Fills (18% opacity for dark surfaces) */
    --status-lead-light:         rgba(168, 166, 158, 0.18);
    --status-booked-light:       rgba(189, 212, 229, 0.18);
    --status-consultation-light: rgba(255, 208,  84, 0.18);
    --status-consult-light:      rgba(255, 208,  84, 0.18);
    --status-nurturing-light:    rgba(255, 208,  84, 0.18);
    --status-engaged-light:      rgba(107, 143,  90, 0.18);
    --status-client-light:       rgba(107, 143,  90, 0.18);
    --status-legacy-light:       rgba(138, 135, 117, 0.18);
    --status-re_nurturing-light: rgba(245, 168, 208, 0.18);
    --status-returning-light:    rgba(189, 212, 229, 0.18);

    /* Shadows → none in dark mode (surface tiers handle elevation) */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    /*
        Dark mode elevation hierarchy:
        Level 0 (page):     --surface-primary  (#1E1C19)
        Level 1 (card):     --surface-card     (#252320)
        Level 2 (elevated): --surface-elevated (#2D2B27)
        Level 3 (modal):    --color-dark-surface-high (#353330)
    */
}


/* ══ M3 SHAPE SCALE ═════════════════════════════════════════════════════════ */
/* All border-radius values reference these tokens. No raw pixel values in    */
/* component CSS.                                                              */

:root {
    --shape-xs:   4px;
    --shape-sm:   8px;
    --shape-md:   12px;
    --shape-lg:   16px;
    --shape-xl:   28px;
    --shape-full: 999px;
}


/* ══ M3 MOTION TOKENS ══════════════════════════════════════════════════════ */
/* M3 easing curves + duration scale. Raw `ease` / `linear` never appear in  */
/* component CSS.                                                             */

:root {
    /* Easing curves */
    --motion-standard:    cubic-bezier(.2, 0, 0, 1);
    /* [MD3-FIX M-2] True Emphasized curve for expand/collapse */
    --motion-emphasized:  cubic-bezier(.05, .7, .1, 1);
    --motion-decelerated: cubic-bezier(0, 0, 0, 1);
    --motion-accelerated: cubic-bezier(.3, 0, 1, 1);

    /* Duration scale */
    --duration-short3:  150ms;
    --duration-short4:  200ms;
    --duration-medium2: 300ms;
    --duration-medium4: 400ms;
}


/* ══ TIER 3 — COMPONENT TOKENS ══════════════════════════════════════════════ */
/* Shorthand for recurring component values. Referenced from components.css.  */

:root {
    /* Card */
    --card-radius:  var(--shape-md);
    --card-padding: 20px;
    --card-shadow:  var(--elevation-2);
    --card-border:  1px solid var(--border-default);

    /* Button */
    --button-radius:  var(--shape-sm);
    --button-padding: 8px 16px;

    /* Pill */
    --pill-radius:  var(--shape-full);
    --pill-padding: 4px 12px;

    /* Input */
    --input-radius:  var(--shape-sm);
    --input-padding: 10px 14px;
    --input-border:  1px solid var(--border-default);

    /* Chart — color sequence derived from brand palette */
    --chart-1: var(--status-info);      /* Sky Mist */
    --chart-2: var(--status-success);   /* Moss Green */
    --chart-3: var(--status-warning);   /* Sunbeam Yellow */
    --chart-4: var(--status-error);     /* Blossom Pink */
    --chart-5: var(--accent-sand);      /* Soft Sand */

    /* Chart structural colors — update automatically with theme */
    --chart-grid:  var(--border-subtle);
    --chart-axis:  var(--text-muted);
    --chart-label: var(--text-secondary);
}


/* ══ TYPE SCALE ══════════════════════════════════════════════════════════════ */
/* 1.25 ratio (major third). ITC Cheltenham Pro for display/headings,         */
/* Inter for everything else.                                                 */

:root {
    /* Fluid Type Scale — Major Third (1.25) ratio
     * Format: clamp(min, preferred, max)
     * min = mobile (375px viewport)
     * max = desktop (1280px viewport)
     */
    --text-xs:   clamp(0.688rem, 0.1105vw + 0.6616rem, 0.750rem);   /* 11px → 12px */
    --text-sm:   clamp(0.750rem, 0.1105vw + 0.7241rem, 0.813rem);   /* 12px → 13px */
    --text-base: clamp(0.938rem, 0.1105vw + 0.9116rem, 1.000rem);   /* 15px → 16px */
    --text-lg:   clamp(1.063rem, 0.3315vw + 0.9848rem, 1.250rem);   /* 17px → 20px */
    --text-xl:   clamp(1.250rem, 0.5525vw + 1.1205rem, 1.563rem);   /* 20px → 25px */
    --text-2xl:  clamp(1.500rem, 0.8840vw + 1.2928rem, 2.000rem);   /* 24px → 32px */
    --text-3xl:  clamp(1.750rem, 1.3260vw + 1.4392rem, 2.500rem);   /* 28px → 40px */

    /* Font Families */
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'ITC Cheltenham Pro', 'ITCCheltenhamPro', Georgia, serif;

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

    /* Line Heights */
    --leading-tight:   1.15;  /* Display */
    --leading-snug:    1.25;  /* Headings */
    --leading-normal:  1.55;  /* Body */
    --leading-relaxed: 1.7;   /* Long prose */
}


/* ══ SPACING SCALE ═══════════════════════════════════════════════════════════ */
/* 4px base unit.                                                              */

:root {
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  24px;
    --space-6:  32px;
    --space-7:  40px;
    --space-8:  48px;
    --space-10: 64px;

    --space-paragraph: var(--space-4);
}


/* ══ Z-INDEX SCALE ═══════════════════════════════════════════════════════════ */

:root {
    --z-base:      0;
    --z-raised:    10;
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-overlay:   300;
    --z-modal:     400;
    --z-toast:     500;
}


/* ══ HEADING VERTICAL RHYTHM ════════════════════════════════════════════════ */
/* Consumed by Layer 5 (prose context). Defined here so all spacing is        */
/* co-located with the spacing scale.                                         */

:root {
    --h1-margin-top:    var(--space-8);   /* 48px */
    --h1-margin-bottom: var(--space-5);   /* 24px */
    --h2-margin-top:    var(--space-7);   /* 40px */
    --h2-margin-bottom: var(--space-4);   /* 16px */
    --h3-margin-top:    var(--space-6);   /* 32px */
    --h3-margin-bottom: var(--space-3);   /* 12px */
    --h4-margin-top:    var(--space-5);   /* 24px */
    --h4-margin-bottom: var(--space-2);   /* 8px  */
}


/* ══ TRANSITIONS ═════════════════════════════════════════════════════════════ */

:root {
    --transition-fast:   var(--duration-short3) var(--motion-standard);
    --transition-normal: var(--duration-short4) var(--motion-standard);
    --transition-slow:   var(--duration-medium2) var(--motion-standard);
    --transition-expand: var(--duration-medium2) var(--motion-emphasized);
}


/* ══ BACKWARD COMPAT ALIASES ════════════════════════════════════════════════ */
/* Legacy token names used by existing CSS files. Remove as each file        */
/* is migrated to canonical names (Phases 2–3).                              */

:root {
    /* Surface aliases */
    --bg-primary:       var(--surface-primary);
    --bg-surface:       var(--surface-card);
    --bg-surface-hover: var(--surface-card-hover);
    --bg-card:          var(--surface-card);
    --bg-secondary:     var(--surface-elevated);
    --bg-base:          var(--surface-primary);

    /* Border aliases */
    --border-light: var(--border-subtle);
    --border:       var(--border-default);

    /* Accent aliases */
    --accent-blue:         var(--status-info);
    --accent-blue-light:   var(--status-info-light);
    --accent-yellow:       var(--status-warning);
    --accent-yellow-light: var(--status-warning-light);
    --accent-pink:         var(--status-error);
    --accent-pink-light:   var(--status-error-light);
    --accent-black:        var(--color-charcoal-black);

    /* Color aliases */
    --color-success: var(--status-success);
    --color-warning: var(--status-warning);
    --color-error:   var(--status-error);
    --color-info:    var(--status-info);
    --color-danger:  var(--status-danger);
    --color-primary: var(--accent-primary);

    /* Spacing aliases */
    --space-xs:  var(--space-1);
    --space-sm:  var(--space-2);
    --space-md:  var(--space-4);
    --space-lg:  var(--space-5);
    --space-xl:  var(--space-6);
    --space-2xl: var(--space-8);

    /* Radius aliases */
    --radius-sm:   var(--shape-xs);
    --radius-md:   var(--shape-sm);
    --radius-lg:   var(--shape-md);
    --radius-pill: var(--pill-radius);

    /* Font aliases */
    --font-family:          var(--font-body);
    --font-size-xs:         var(--text-xs);
    --font-size-sm:         var(--text-sm);
    --font-size-base:       var(--text-base);
    --font-size-lg:         var(--text-lg);
    --font-size-xl:         var(--text-xl);
    --font-size-2xl:        var(--text-2xl);
    --font-size-3xl:        var(--text-3xl);
    --font-weight-normal:   var(--weight-regular);
    --font-weight-medium:   var(--weight-medium);
    --font-weight-semibold: var(--weight-semibold);
    --font-weight-bold:     var(--weight-bold);
    --line-height-tight:    var(--leading-tight);
    --line-height-normal:   var(--leading-normal);
    --line-height-relaxed:  var(--leading-relaxed);
}