/* ============================================================================
   QuoteTrades — Design Tokens (single source of truth for the design language)
   ----------------------------------------------------------------------------
   This is the one file to refine the look. Change a value here and the whole
   app follows. Built on the existing brand (blue #2563eb, warm canvas) and
   systematised into ramps + scales so the UI stays consistent.

   Loaded BEFORE app.css so every stylesheet and component can consume these.
   Track E — AAA UI overhaul, foundation layer.
   ============================================================================ */

:root {
    /* ---- Brand ramp (blue) — 600 is the current primary --------------------- */
    --brand-50:  #eff6ff;
    --brand-100: #dbeafe;
    --brand-200: #bfdbfe;
    --brand-300: #93c5fd;
    --brand-400: #60a5fa;
    --brand-500: #3b82f6;
    --brand-600: #2563eb;   /* primary */
    --brand-700: #1d4ed8;   /* primary hover */
    --brand-800: #1e40af;
    --brand-900: #1e3a8a;

    /* ---- Neutral ramp (warm-tinted to sit on the canvas) -------------------- */
    --neutral-0:   #ffffff;
    --neutral-50:  #f8f8f7;
    --neutral-100: #f4f4f2;   /* page canvas */
    --neutral-200: #e9e9e6;
    --neutral-300: #e5e7eb;   /* hairline border */
    --neutral-400: #cbd0d6;
    --neutral-500: #9aa3ad;
    --neutral-600: #6b7280;   /* muted text */
    --neutral-700: #4b5563;
    --neutral-800: #333d47;
    --neutral-900: #1f2933;   /* body text */

    /* ---- Semantic ----------------------------------------------------------- */
    --success-600: #16a34a;  --success-500: #22c55e;  --success-50: #f0fdf4;
    --warning-600: #d97706;  --warning-500: #f59e0b;  --warning-50: #fffbeb;
    --danger-600:  #dc2626;  --danger-500:  #ef4444;  --danger-50:  #fef2f2;
    --info-600:    #0891b2;  --info-500:    #06b6d4;  --info-50:    #ecfeff;

    /* 700s: the -600 of each ramp on its own -50 tint lands around 3:1, which fails WCAG AA for
       body text (4.5:1) — so a green "Paid" chip or an amber "Overdue" chip was technically
       unreadable to anyone with less than perfect sight. These clear it with room to spare.
       Use the 700 for TEXT on a tinted background; the 600 stays right for solid fills and icons. */
    --success-700: #15803d;   /* 4.79:1 on --success-50 */
    --warning-700: #b45309;   /* 4.84:1 on --warning-50 */
    --danger-700:  #b91c1c;
    --info-700:    #0e7490;

    /* 100/200/800: the status-chip rungs. A chip is a tinted fill (100), sometimes a border
       (200), and text dark enough to read on it (800) — the app used all three long before they
       had names, so these are the values already in use, not new colours. Added when the tradie
       pages were tokenised; without them ~900 chip colours had no honest token to point at. */
    --success-100: #dcfce7;  --success-200: #bbf7d0;  --success-800: #166534;
    --warning-100: #fef3c7;  --warning-200: #fde68a;  --warning-800: #92400e;
    --danger-100:  #fee2e2;  --danger-200:  #fecaca;  --danger-800:  #991b1b;

    /* ---- Semantic aliases the app already uses (kept stable, now sourced from
           the ramps so refining a ramp updates everything) --------------------- */
    --color-primary:       var(--brand-600);
    --color-primary-hover: var(--brand-700);
    --color-primary-light: var(--brand-50);
    --color-primary-glow:  rgba(37, 99, 235, 0.25);
    --color-primary-glow-soft: rgba(37, 99, 235, 0.06);  /* subtle hover tint on list rows / action links */
    --color-text:          var(--neutral-900);
    --color-text-muted:    var(--neutral-600);
    --color-border:        var(--neutral-300);
    --color-hover:         var(--neutral-100);
    --color-canvas:        var(--neutral-100);
    --color-surface:       var(--neutral-0);
    --color-surface-2:     var(--neutral-50);

    /* ---- Spacing scale (4px base) ------------------------------------------- */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ---- Radius ------------------------------------------------------------- */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-pill: 999px;

    /* ---- Elevation / shadows (layered for depth) ---------------------------- */
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
    --shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.10), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
    --shadow-xl: 0 20px 24px -4px rgba(16, 24, 40, 0.10), 0 8px 8px -4px rgba(16, 24, 40, 0.04);
    --shadow-2xl: 0 24px 48px -12px rgba(16, 24, 40, 0.18);
    --shadow-brand: 0 8px 24px -6px var(--color-primary-glow);

    /* ---- Type scale --------------------------------------------------------- */
    --text-xs:   0.75rem;    /* 12 */
    --text-sm:   0.8125rem;  /* 13 */
    --text-base: 0.9375rem;  /* 15 — comfortable app default */
    --text-md:   1rem;       /* 16 */
    --text-lg:   1.125rem;   /* 18 */
    --text-xl:   1.375rem;   /* 22 */
    --text-2xl:  1.75rem;    /* 28 */
    --text-3xl:  2.25rem;    /* 36 */
    --text-4xl:  3rem;       /* 48 */

    --leading-tight: 1.2;
    --leading-snug: 1.35;
    --leading-normal: 1.55;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;

    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.02em;
    --tracking-wider: 0.06em;

    /* ---- Layering ------------------------------------------------------------
       One ladder for the whole app. Pick the rung, don't invent a number — a stray 1200
       is how the chat flyout ended up painted over the profile menu.

       Two traps this scale exists to prevent:
         * A parent with a z-index and a position creates a STACKING CONTEXT, so its
           children are capped at the parent's rung no matter how large their own
           z-index is. The topbar is z-index 1100 and sticky, so a dropdown inside it
           cannot beat anything above 1100 at the root — 99999 wouldn't help.
         * Elements on the SAME rung fall back to DOM order, which is usually what you
           want for the topbar flyouts: the one declared last wins when both are open. */
    --z-page:        1;
    --z-sticky:      1000;   /* sticky table headers, in-page toolbars */
    --z-topbar:      1100;   /* the app/public topbar itself */
    --z-topbar-menu: 1200;   /* its flyouts: chat, notifications, profile — ALL the same rung */
    --z-dock:        1190;   /* docked chat windows, below the topbar's menus */
    --z-modal:       1300;   /* page-level modals and pickers */
    --z-walkthrough: 3000;   /* the guided-tour overlay, above ordinary chrome */
    --z-alarm:       5000;   /* the alarm ring — must beat a walkthrough */
    --z-confirm:    12000;   /* destructive confirmation, always last word */

    /* ---- Motion ------------------------------------------------------------- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 320ms;
}