/* ========================================
   DESIGN TOKENS - Colors, Typography & Spacing
   Based on Figma Design System
   ----------------------------------------
   USAGE GUIDE
   • Never use raw hex / px values outside this file.
   • All component & page CSS must reference var(--token-name).
   • To change any visual value, update ONLY this file.
======================================== */

:root {
    /* ====== COLOR SYSTEM ====== */

    /* Primary */
    --color-primary-blue: #003DFF;
    --color-primary-blue-hover: #0033CC;
    --color-primary-blue-active: #002999;
    --color-secondary-blue: #007ACA;

    /* Neutrals */
    --color-white: #FFFFFF;
    --color-neutral-dg-80: #343F46;
    --color-neutral-dg-60: #516570;
    --color-neutral-dg-50: #5D7481;
    --color-neutral-mg-30: #DCE0E2;
    --color-neutral-mg-20: #EEF0F1;
    --color-neutral-bg-subtle: #F9FAFB;   /* light option / hover bg */

    /* Accent */
    --color-accent-purple: #7102EC;          /* canonical purple — use for all interactive accent */
    --color-accent-purple-hover: #5A01BC;    /* darker 20% */
    --color-accent-aquamarine-60: #00BA99;
    --color-accent-aquamarine-40: #00D5B8;
    --color-accent-orange: #FFB07D;
    --color-accent-peach: #FFC28F;
    --color-skin-tone: #DD9488;
    --color-cheeks: #FFA198;

    /* Semantic — Status */
    --color-success: #059669;
    --color-success-bg: #F0FFF4;
    --color-success-border: #059669;
    --color-error: #DC2626;
    --color-error-hover: #B91C1C;
    --color-error-bg: #FEF2F2;
    --color-error-border: #FECACA;
    --color-cancelled: #91001F;
    --color-cancelled-bg: #F9E5EE;
    --color-cancelled-border: #91001F;
    --color-warning-bg: #FFF0E6;           /* alert/info strip */

    /* Semantic — Disabled */
    --color-disabled-bg: var(--color-neutral-mg-30);
    --color-disabled-text: var(--color-neutral-dg-50);
    --color-disabled-border: #B9C1C6;

    /* Semantic — Readonly */
    --color-readonly-bg: #F4F4F4;
    --color-readonly-border: var(--color-disabled-border);

    /* Semantic — Placeholder */
    --color-placeholder: #9BADB6;

    /* Party / Role tags */
    --color-tag-insured-bg: #F5FEFD;
    --color-tag-insured-border: #00E2C8;
    --color-tag-insured-text: #42525A;
    --color-tag-claimant-bg: #F2E6FF;
    --color-tag-claimant-border: #3400CC;
    --color-tag-claimant-text: #3400CC;
    --color-tag-notifier-bg: #FFF0E6;
    --color-tag-notifier-border: #FE6806;
    --color-tag-notifier-text: var(--color-neutral-dg-60);
    --color-tag-driver-bg: #E1F6FF;
    --color-tag-driver-border: #005AA8;
    --color-tag-driver-text: #005AA8;
    --color-tag-agent-bg: #F5FEFD;
    --color-tag-agent-border: #00E2C8;
    --color-tag-agent-text: #42525A;

    /* Add-party card / UI chrome */
    --color-add-party-card-border: #C7C7FF;    /* light indigo — card default border */
    --color-review-separator-strong: #D0D4D6;  /* stronger separator in review cards */

    --gradient-main-bg: linear-gradient(317.24deg, #F5FAFF 32.36%, #FAF6FF 88.1%);
    --gradient-logo: linear-gradient(90deg, #003DFF 0.02%, #007ACA 19.5%, #00ADFF 59.55%, #0DC5FF 70.74%, #00E2C8 100.02%);
    --gradient-upload-progress: linear-gradient(270deg, #AA69FF 0%, #003DFF 97.66%);

    /* ====== TYPOGRAPHY SYSTEM ====== */

    /* Families */
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'PT Serif', serif;

    /* Sizes */
    --font-size-h1: 48px;          /* Main headlines */
    --font-size-h2: 32px;          /* Section headings */
    --font-size-body: 16px;        /* Body / paragraph text — alias of paragraph */
    --font-size-paragraph: 16px;
    --font-size-subheading: 20px;  /* Section sub-titles */
    --font-size-caption: 14px;     /* Buttons, small text */
    --font-size-disclaimer: 12px;  /* Fine print, labels */
    --font-size-micro: 10px;       /* Toggle text, badge fine print */

    /* Line Heights */
    --line-height-h1: 56px;
    --line-height-h2: 40px;
    --line-height-body: 24px;      /* Alias of paragraph */
    --line-height-paragraph: 24px;
    --line-height-subheading: 28px;
    --line-height-caption: 20px;
    --line-height-disclaimer: 16px;
    --line-height-micro: 14px;

    /* Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;

    /* Letter Spacing */
    --letter-spacing-tight: -0.04em;  /* Headlines */
    --letter-spacing-normal: 0.01em;  /* Body, labels */
    --letter-spacing-wide: 0.16px;    /* Wide labels */

    /* ====== SPACING SYSTEM ====== */

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 40px;
    --spacing-3xl: 48px;

    /* ====== BORDER & BORDER RADIUS ====== */

    --border-width-sm: 1px;
    --border-width-md: 2px;
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-pill: 40px;
    --radius-round: 50%;

    /* ====== SHADOW SYSTEM ====== */

    --shadow-soft: 0px 5.05px 10.04px rgba(39, 69, 85, 0.038), 0px 2.10px 4.18px rgba(39, 69, 85, 0.027);
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-card-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-button-hover: 0 4px 12px rgba(0, 61, 255, 0.3);
    --shadow-tooltip: 0px 6px 12px rgba(39, 69, 85, 0.16);
    --shadow-upload-item: 0px 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-toggle: 0 2px 4px rgba(0, 0, 0, 0.2);         /* toggle knob depth */
    --shadow-error-card: 0 4px 20px rgba(220, 38, 38, 0.15); /* error/danger card glow */

    /* Alpha / tint helpers */
    --color-white-alpha-50: rgba(255, 255, 255, 0.5);       /* semi-transparent white overlay */
    --color-primary-blue-tint-10: rgba(0, 61, 255, 0.1);    /* blue hover tint on selection items */
    --color-neutral-dg-50-alpha-40: rgba(81, 101, 112, 0.4); /* muted divider / separator border */

    /* ====== TRANSITION SYSTEM ====== */

    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;

    /* ====== LAYOUT SYSTEM ====== */

    --max-width-content: 1280px;
    --max-width-form: 588px;           /* wizard form card outer */
    --max-width-form-inner: 524px;     /* inner form content / fields */
    --max-width-illustration: 486px;
    --max-width-content-panel: 486px;
    --max-width-review: 888px;         /* review / summary page */
    --max-width-review-card: 840px;

    /* Header & shell heights — single source of truth.
       Update ONLY here; all offsets adjust automatically. */
    --height-header: 60px;
    --height-progress-bar: 4px;
    --height-header-total: calc(var(--height-header) + var(--height-progress-bar)); /* 64px */
    --height-footer: 120px;

    /* Icon sizes */
    --icon-sm: 14px;
    --icon-md: 24px;
    --icon-lg: 40px;
    --icon-xl: 64px;
    --icon-2xl: 80px;

    /* Component-specific heights — single source of truth */
    --height-item-card: 80px;        /* vehicle/property list item row height */
    --height-add-party-card: 174px;  /* add-party selector card height */
    --height-review-section-left: 282px; /* fixed left column in review layout */
    --max-width-confirmation-card: 380px; /* claim confirmation info card */

    /* Add-party card dimensions */
    --width-add-party-card: 178px;   /* add-party card width */
    --height-add-party-card-figma: 204px; /* add-party card height (from Figma) */
    --width-add-party-icon-container: 146px;  /* icon container width */
    --height-add-party-icon-container: 72px;  /* icon container height */
    --height-add-party-icon: 64px;   /* main icon height */
    --spacing-add-party-tooltip-gap: 56px;  /* tooltip icon gap */
    --spacing-badge-offset: -8px;    /* required badge offset */

    /* Input heights */
    --input-height: 52px;

    /* ====== RESPONSIVE BREAKPOINTS (reference — use in media queries) ======
       CSS custom properties cannot be used inside @media, so these are
       documented here as a single canonical reference.
       --bp-mobile-sm : 480px   (small phones)
       --bp-mobile    : 768px   (phones / portrait tablet)
       --bp-tablet    : 1024px  (landscape tablet / small desktop)
       --bp-desktop   : 1200px  (standard desktop)        */

    /* ====== Z-INDEX SYSTEM ====== */

    --z-header: 1000;
    --z-back-button: 1001;
    --z-overlay: 1002;
    --z-tooltip: 1003;
    --z-multiselect: 1000;
}

/* ====== BASE TYPOGRAPHY CLASSES ====== */

.text-h1 {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-extra-bold);
    font-size: var(--font-size-h1);
    line-height: var(--line-height-h1);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-neutral-dg-60);
    margin: 0;
}

.text-h2 {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
    color: var(--color-neutral-dg-60);
    margin: 0;
}

.text-subheading {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-subheading);
    line-height: var(--line-height-subheading);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-neutral-dg-60);
    margin: 0;
}

.text-paragraph {
    font-family: var(--font-secondary);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-paragraph);
    line-height: var(--line-height-paragraph);
    color: var(--color-neutral-dg-60);
}

.text-body {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    color: var(--color-neutral-dg-60);
}

.text-caption {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
    letter-spacing: var(--letter-spacing-normal);
    color: var(--color-neutral-dg-60);
}

.text-disclaimer {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-disclaimer);
    line-height: var(--line-height-disclaimer);
    color: var(--color-neutral-dg-60);
}

/* ====== UTILITY CLASSES ====== */

/* Text alignment */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* Text color */
.color-primary   { color: var(--color-primary-blue); }
.color-secondary { color: var(--color-secondary-blue); }
.color-neutral   { color: var(--color-neutral-dg-60); }
.color-white     { color: var(--color-white); }
.color-error     { color: var(--color-error); }

/* Display */
.d-none    { display: none; }
.d-flex    { display: flex; }
.d-block   { display: block; }

/* Shared card surface */
.loss-card {
    background: var(--color-white);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-card);
    box-sizing: border-box;
    margin-bottom: var(--spacing-md);
}

/* Shared horizontal rule / separator */
.divider {
    display: block;
    width: 100%;
    height: var(--border-width-sm);
    background: var(--color-neutral-mg-20);
    border: none;
    margin: 0;
    flex-shrink: 0;
}

.divider--strong {
    background: var(--color-review-separator-strong);
    margin: var(--spacing-md) 0;
}

/* Accessible visually-hidden (screen-reader only) */
.visually-hidden,
.homepage-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ====== ACCESSIBILITY ====== */

/* Consistent focus ring applied to all interactive elements */
:focus-visible {
    outline: 2px solid var(--color-primary-blue);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}