/* ═══════════════════════════════════════════════════════════════════
   Fcar Design System — tokens extracted from Figma
   File: Fcar (3d0jTMCMAmpxNz6w6sFNGW) · page "DS" · node 10-10
   Single source of truth for raw brand tokens. Theme-aware semantic
   tokens (--tw-primary, --tw-surface, …) live in _Layout.cshtml.
   ═══════════════════════════════════════════════════════════════════ */
:root {
    /* ── Base colours ──────────────────────────────────────────── */
    --fcar-primary:   #3F5ADD;   /* Primary Color   (= primary-600)  */
    --fcar-secondary: #F79A31;   /* Secondary Color (= secondary-600)*/
    --fcar-neutral:   #E6E6E6;   /* Neutral - White (= white-500)    */
    --fcar-ink:       #1A1A1A;   /* Neutral - Black (= black-500)    */
    --fcar-error:     #FF5B5B;   /* Error Color     (= error-600)    */
    --fcar-success:   #63E463;   /* Success Color   (= success-600)  */

    /* ── Primary scale ─────────────────────────────────────────── */
    --fcar-primary-100:  #E0FAFF;
    --fcar-primary-200:  #BFDCFF;
    --fcar-primary-300:  #9DBCFF;
    --fcar-primary-400:  #7B9CFF;
    --fcar-primary-500:  #5C7CF2;
    --fcar-primary-600:  #3F5ADD;
    --fcar-primary-700:  #3B54D4;
    --fcar-primary-800:  #2D42B7;
    --fcar-primary-900:  #1A258A;
    --fcar-primary-1000: #07004F;
    --fcar-primary-1100: #02000F;

    /* ── Secondary scale ───────────────────────────────────────── */
    --fcar-secondary-100:  #FFF1C5;
    --fcar-secondary-200:  #FFE3AD;
    --fcar-secondary-300:  #FFD192;
    --fcar-secondary-400:  #FFBE75;
    --fcar-secondary-500:  #FFAC57;
    --fcar-secondary-600:  #F79A31;
    --fcar-secondary-700:  #EB9128;
    --fcar-secondary-800:  #C97606;
    --fcar-secondary-900:  #914C00;
    --fcar-secondary-1000: #491500;
    --fcar-secondary-1100: #000000;

    /* ── Neutral / White scale ─────────────────────────────────── */
    --fcar-white-100:  #FFFFFF;
    --fcar-white-200:  #FAFAFA;
    --fcar-white-300:  #F5F5F5;
    --fcar-white-400:  #F0F0F0;
    --fcar-white-500:  #E6E6E6;
    --fcar-white-600:  #D9D9D9;
    --fcar-white-700:  #CCCCCC;
    --fcar-white-800:  #BFBFBF;
    --fcar-white-900:  #B3B3B3;
    --fcar-white-1000: #A6A6A6;

    /* ── Neutral / Black scale ─────────────────────────────────── */
    --fcar-black-100:  #808080;
    --fcar-black-200:  #666666;
    --fcar-black-300:  #4D4D4D;
    --fcar-black-400:  #333333;
    --fcar-black-500:  #1A1A1A;
    --fcar-black-600:  #141414;
    --fcar-black-700:  #0D0D0D;
    --fcar-black-800:  #070707;
    --fcar-black-900:  #040404;
    --fcar-black-1000: #000000;

    /* ── Error scale ───────────────────────────────────────────── */
    --fcar-error-100:  #FFE2DB;
    --fcar-error-200:  #FFCBC3;
    --fcar-error-300:  #FFB0A9;
    --fcar-error-400:  #FF958F;
    --fcar-error-500:  #FF7975;
    --fcar-error-600:  #FF5B5B;
    --fcar-error-700:  #F35454;
    --fcar-error-800:  #D13E41;
    --fcar-error-900:  #991621;
    --fcar-error-1000: #500000;
    --fcar-error-1100: #020000;

    /* ── Success scale ─────────────────────────────────────────── */
    --fcar-success-100:  #D3FFCF;
    --fcar-success-200:  #C1FFBD;
    --fcar-success-300:  #ABFFA8;
    --fcar-success-400:  #95F792;
    --fcar-success-500:  #7DED7B;
    --fcar-success-600:  #63E463;
    --fcar-success-700:  #5AD85B;
    --fcar-success-800:  #40B742;
    --fcar-success-900:  #0C8117;
    --fcar-success-1000: #003B00;

    /* ── Typography ────────────────────────────────────────────── */
    /* Primary & secondary family: SF Pro Display (system on Apple, falls back elsewhere) */
    --fcar-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;

    /* Hierarchy: size / line-height / weight (letter-spacing -0.02em on Display ≥ md) */
    --fcar-display-2xl: 700 72px/90px var(--fcar-font-sans);
    --fcar-display-xl:  700 60px/72px var(--fcar-font-sans);
    --fcar-display-lg:  600 48px/60px var(--fcar-font-sans);
    --fcar-display-md:  600 36px/44px var(--fcar-font-sans);
    --fcar-display-sm:  600 30px/38px var(--fcar-font-sans);
    --fcar-display-xs:  600 24px/32px var(--fcar-font-sans);
    --fcar-body-xl:     700 24px/32px var(--fcar-font-sans);
    --fcar-body-lg:     600 20px/30px var(--fcar-font-sans);
    --fcar-body-md:     400 16px/24px var(--fcar-font-sans);
    --fcar-body-sm:     400 14px/20px var(--fcar-font-sans);
    --fcar-body-xs:     400 12px/18px var(--fcar-font-sans);

    /* ── Border radius ─────────────────────────────────────────── */
    --fcar-radius-none: 0;
    --fcar-radius-sm:   4px;
    --fcar-radius-md:   8px;
    --fcar-radius-lg:   12px;
    --fcar-radius-xl:   16px;
    --fcar-radius-full: 9999px;

    /* ── Spacing ───────────────────────────────────────────────── */
    --fcar-space-xs: 4px;
    --fcar-space-sm: 8px;
    --fcar-space-md: 16px;
    --fcar-space-lg: 24px;
    --fcar-space-xl: 32px;
    --fcar-container-mobile:  16px;   /* page padding, mobile  */
    --fcar-container-desktop: 32px;   /* page padding, desktop */
    --fcar-max-width: 1280px;         /* max content width     */
    --fcar-paragraph-max-width: 700px;

    /* ── Shadows (verified from product screens) ───────────────── */
    --fcar-shadow-input:   0px 4px 10px 0px rgba(0, 0, 0, 0.05);   /* inputs, chips      */
    --fcar-shadow-card:    0px 7px 20px 0px rgba(0, 0, 0, 0.10);   /* cards, panels      */
    --fcar-shadow-soft:    0px 4px 16px 0px rgba(0, 0, 0, 0.04);   /* compare, tables    */
    --fcar-shadow-primary: 0px 12px 24px 0px rgba(69, 91, 221, 0.25); /* primary CTA     */
    --fcar-shadow-auth-card: 0px 10px 28px 0px rgba(23, 34, 77, 0.08); /* auth screens   */

    /* ── Accent & tint tokens (named styles / screen usage) ────── */
    --fcar-accent-blue:   #0088FF;   /* Figma "Colors/Blue"   */
    --fcar-accent-orange: #FF8D28;   /* Figma "Colors/Orange" */
    --fcar-rating:        #FFCC00;   /* star rating           */
    --fcar-brand-orange:  #FF6E00;   /* logo accent dot       */
    --fcar-logo-blue:     #3B54D4;   /* "fcar" wordmark       */
    --fcar-tint-premium:  #F2F6FD;
    --fcar-tint-insight:  #EFF2FF;
    --fcar-tint-info:     #EBF2FF;
    --fcar-tint-success:  #F7FFF7;
    --fcar-tint-error:    #FFFAFA;
    --fcar-tint-orange:   #FFF4EB;
    --fcar-tint-row:      #F8FAFF;
}