/* ==========================================================================
   BookingMoko — DESIGN TOKENS  (single source of truth)  v3.0 / 2026
   Palette: deep navy + brass-gold accent, cool white paper.
   Change a value here -> homepage, business, customer and admin all update.
   Load order on EVERY page:
   design-tokens.css -> global.css -> components.css -> (app-layout.css / page css)
   ========================================================================== */

:root {
    color-scheme: light dark;

    /* ---- Brand ---- */
    --bm-primary:        #0f2a52;   /* deep navy: main buttons, key panels */
    --bm-primary-hover:  #183c73;
    --bm-primary-soft:   #e3eaf7;
    --bm-on-primary:     #ffffff;
    --bm-accent:         #d9a441;   /* brass gold: CTAs, highlights, active states */
    --bm-accent-hover:   #c4912f;
    --bm-accent-soft:    #fbf0d6;
    --bm-on-accent:      #0a1a33;   /* dark text on gold */

    /* ---- Navy scale (dark panels: header, hero, CTA, footer) ---- */
    --bm-navy-950: #060f20;
    --bm-navy-900: #0a1a33;
    --bm-navy-800: #0f2547;
    --bm-navy-700: #163461;

    /* ---- Text ---- */
    --bm-ink:            #0b1a33;
    --bm-ink-2:          #3f4d69;
    --bm-ink-3:          #5f6c89;   /* AA on paper for 14px+ */

    /* ---- Surfaces ---- */
    --bm-paper:          #f4f6fb;   /* page background */
    --bm-surface:        #ffffff;   /* cards, inputs */
    --bm-surface-2:      #e9eef8;   /* subtle panels, table headers */
    --bm-line:           #dce3f0;   /* borders, dividers */
    --bm-line-strong:    #c3cee3;
    --bm-overlay:        rgba(6, 15, 32, .62);

    /* ---- Service colours (calendar blocks, chips, legends) ---- */
    --bm-svc-hair:       #e4eaff;   --bm-svc-hair-ink:   #2a43a0;
    --bm-svc-barber:     #dce9f7;   --bm-svc-barber-ink: #14507f;   /* barbershop / salon */
    --bm-svc-nails:      #fde6ef;   --bm-svc-nails-ink:  #a8234f;
    --bm-svc-vehicle:    #dcf3ea;   --bm-svc-vehicle-ink:#0f6b55;   /* vehicle rental */
    --bm-svc-moving:     #fff1d6;   --bm-svc-moving-ink: #8a5a00;   /* house moving */

    /* ---- Status ---- */
    --bm-success:        #12805c;   --bm-success-soft: #dcf3ea;
    --bm-warning:        #9a6200;   --bm-warning-soft: #fff1d6;
    --bm-danger:         #c0262d;   --bm-danger-soft:  #fde4e4;
    --bm-info:           #1d5fa8;   --bm-info-soft:    #e1eefb;

    /* ---- Typography ---- */
    --bm-font-display: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, sans-serif;
    --bm-font-body:    "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --bm-text-xs:   .78rem;
    --bm-text-sm:   .875rem;
    --bm-text-base: 1rem;
    --bm-text-lg:   1.125rem;
    --bm-text-xl:   clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
    --bm-text-2xl:  clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
    --bm-text-3xl:  clamp(2rem, 1.5rem + 2.2vw, 3.2rem);
    --bm-text-hero: clamp(2.5rem, 1.7rem + 3.8vw, 4.75rem);
    --bm-leading-tight: 1.08;
    --bm-leading-snug:  1.3;
    --bm-leading-body:  1.65;

    /* ---- Spacing (4px base) ---- */
    --bm-space-1: .25rem;  --bm-space-2: .5rem;   --bm-space-3: .75rem;
    --bm-space-4: 1rem;    --bm-space-5: 1.5rem;  --bm-space-6: 2rem;
    --bm-space-7: 3rem;    --bm-space-8: 4.5rem;  --bm-space-9: 7rem;
    --bm-section-y: clamp(4rem, 3rem + 5vw, 7.5rem);

    /* ---- Shape: different radii for different jobs ---- */
    --bm-r-xs:   6px;      /* chips, small inputs  */
    --bm-r-sm:   10px;     /* buttons, inputs      */
    --bm-r-md:   16px;     /* cards                */
    --bm-r-lg:   24px;     /* feature panels       */
    --bm-r-xl:   36px;     /* hero card, CTA       */
    --bm-r-pill: 999px;

    /* ---- Elevation (tinted with ink, never pure black) ---- */
    --bm-shadow-sm: 0 1px 2px rgba(11, 26, 51, .06), 0 1px 1px rgba(11, 26, 51, .04);
    --bm-shadow-md: 0 8px 24px -8px rgba(11, 26, 51, .18);
    --bm-shadow-lg: 0 28px 60px -24px rgba(6, 15, 32, .45);

    /* ---- Layout ---- */
    --bm-container: 1200px;
    --bm-gutter:    clamp(1rem, .5rem + 2.5vw, 2rem);
    --bm-header-h:  72px;
    --bm-sidebar-w: 264px;     /* app layout */

    /* ---- Motion & focus ---- */
    --bm-ease:      cubic-bezier(.2, .7, .2, 1);
    --bm-fast:      .15s;
    --bm-base:      .25s;
    --bm-focus:     0 0 0 3px var(--bm-paper), 0 0 0 5px var(--bm-accent);

    /* ---- Z-index ---- */
    --bm-z-header: 50;  --bm-z-sidebar: 60;  --bm-z-modal: 100;  --bm-z-toast: 120;
}

/* ---------- Dark theme: automatic, or forced with data-theme="dark" ---------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bm-primary: #9cc0ff;  --bm-primary-hover: #bcd5ff;  --bm-primary-soft: #14284d;
        --bm-on-primary: #07101f;
        --bm-accent: #e8b958;   --bm-accent-hover: #f2cb78;   --bm-accent-soft: #3a2d0f;
        --bm-ink: #eef3ff;  --bm-ink-2: #c5d0e8;  --bm-ink-3: #94a4c6;
        --bm-paper: #07101f;  --bm-surface: #0e1d38;  --bm-surface-2: #13264a;
        --bm-line: #1f3560;   --bm-line-strong: #2f4a80;  --bm-overlay: rgba(2, 6, 14, .75);
        --bm-svc-hair: #1c2a63;   --bm-svc-hair-ink: #b6c4ff;
        --bm-svc-barber: #12365a; --bm-svc-barber-ink: #9ccbf5;
        --bm-svc-nails: #4a1d33;  --bm-svc-nails-ink: #ffa9c6;
        --bm-svc-vehicle: #123a2d;--bm-svc-vehicle-ink: #7fe0c3;
        --bm-svc-moving: #3f2f0d; --bm-svc-moving-ink: #ffd27a;
        --bm-success: #5fdcb0; --bm-success-soft: #123a2d;
        --bm-warning: #ffc861; --bm-warning-soft: #3f2f0d;
        --bm-danger:  #ff8a8f; --bm-danger-soft:  #47181b;
        --bm-info:    #8fc2f5; --bm-info-soft:    #14304d;
        --bm-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
        --bm-shadow-md: 0 8px 24px -8px rgba(0,0,0,.55);
        --bm-shadow-lg: 0 28px 60px -24px rgba(0,0,0,.7);
    }
}
:root[data-theme="dark"] {
    --bm-primary: #9cc0ff;  --bm-primary-hover: #bcd5ff;  --bm-primary-soft: #14284d;
    --bm-on-primary: #07101f;
    --bm-accent: #e8b958;   --bm-accent-hover: #f2cb78;   --bm-accent-soft: #3a2d0f;
    --bm-ink: #eef3ff;  --bm-ink-2: #c5d0e8;  --bm-ink-3: #94a4c6;
    --bm-paper: #07101f;  --bm-surface: #0e1d38;  --bm-surface-2: #13264a;
    --bm-line: #1f3560;   --bm-line-strong: #2f4a80;  --bm-overlay: rgba(2, 6, 14, .75);
    --bm-svc-hair: #1c2a63;   --bm-svc-hair-ink: #b6c4ff;
    --bm-svc-barber: #12365a; --bm-svc-barber-ink: #9ccbf5;
    --bm-svc-nails: #4a1d33;  --bm-svc-nails-ink: #ffa9c6;
    --bm-svc-vehicle: #123a2d;--bm-svc-vehicle-ink: #7fe0c3;
    --bm-svc-moving: #3f2f0d; --bm-svc-moving-ink: #ffd27a;
    --bm-success: #5fdcb0; --bm-success-soft: #123a2d;
    --bm-warning: #ffc861; --bm-warning-soft: #3f2f0d;
    --bm-danger:  #ff8a8f; --bm-danger-soft:  #47181b;
    --bm-info:    #8fc2f5; --bm-info-soft:    #14304d;
    --bm-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --bm-shadow-md: 0 8px 24px -8px rgba(0,0,0,.55);
    --bm-shadow-lg: 0 28px 60px -24px rgba(0,0,0,.7);
}