/* ============================================================
   bClaim Design Tokens
   Apple Human Interface Guidelines, mapped onto a Phoenix base.
   Typeface: Open Sans (system-wide web font).
   Edit values here; never use literal hex/px in components.
   ============================================================ */

/* ----- Light mode (default) ---------------------------------- */
:root {
  /* Apple System Colors — light */
  --bc-color-blue:        #007aff;
  --bc-color-green:       #34c759;
  --bc-color-indigo:      #5856d6;
  --bc-color-orange:      #ff9500;
  --bc-color-pink:        #ff2d55;
  --bc-color-purple:      #af52de;
  --bc-color-red:         #ff3b30;
  --bc-color-teal:        #30b0c7;
  --bc-color-yellow:      #ffcc00;
  --bc-color-brown:       #a2845e;
  --bc-color-mint:        #00c7be;
  --bc-color-cyan:        #32ade6;

  /* System grays — light */
  --bc-gray-1: #8e8e93;
  --bc-gray-2: #aeaeb2;
  --bc-gray-3: #c7c7cc;
  --bc-gray-4: #d1d1d6;
  --bc-gray-5: #e5e5ea;
  --bc-gray-6: #f2f2f7;

  /* Semantic — surfaces & text */
  --bc-bg-base:           #ffffff;
  --bc-bg-elevated:       #ffffff;
  --bc-bg-grouped:        #f2f2f7;
  --bc-bg-subtle:         #f9f9fb;
  --bc-bg-hover:          rgba(0, 0, 0, 0.04);
  --bc-bg-pressed:        rgba(0, 0, 0, 0.08);

  --bc-text-primary:      #1c1c1e;
  --bc-text-secondary:    #3c3c43cc; /* 80% */
  --bc-text-tertiary:     #3c3c4399; /* 60% */
  --bc-text-quaternary:   #3c3c434d; /* 30% */
  --bc-text-on-accent:    #ffffff;
  --bc-text-on-destructive: #ffffff;

  /* Hairlines & borders */
  --bc-separator:         rgba(60, 60, 67, 0.18);
  --bc-separator-strong:  rgba(60, 60, 67, 0.36);
  --bc-border-field:      rgba(60, 60, 67, 0.29);
  --bc-scrim:             rgba(0, 0, 0, 0.40);

  /* Semantic accents */
  --bc-accent:            var(--bc-color-blue);
  --bc-accent-hover:      #0a6dd6;
  --bc-accent-pressed:    #0a5cb8;
  --bc-accent-tint:       rgba(0, 122, 255, 0.12);

  --bc-destructive:       var(--bc-color-red);
  --bc-destructive-hover: #e23028;
  --bc-destructive-pressed: #c5251f;
  --bc-destructive-tint:  rgba(255, 59, 48, 0.12);

  --bc-success:           var(--bc-color-green);
  --bc-success-tint:      rgba(52, 199, 89, 0.14);
  --bc-warning:           var(--bc-color-orange);
  --bc-warning-tint:      rgba(255, 149, 0, 0.14);
  --bc-info:              var(--bc-color-teal);
  --bc-info-tint:         rgba(48, 176, 199, 0.14);

  /* Status pill mapping — Case_V1.Status -> system color */
  --bc-status-received:           var(--bc-color-blue);
  --bc-status-awaiting-inspection: var(--bc-color-orange);
  --bc-status-inspected:          var(--bc-color-teal);
  --bc-status-awaiting-repair:    var(--bc-color-purple);
  --bc-status-awaiting-pickup:    var(--bc-color-indigo);
  --bc-status-awaiting-delivery:  var(--bc-color-indigo);
  --bc-status-booked:             var(--bc-color-cyan);
  --bc-status-on-hold:            var(--bc-color-yellow);
  --bc-status-closed:             var(--bc-gray-1);

  /* Focus ring — AA visible in both modes */
  --bc-focus-ring:        0 0 0 3px rgba(0, 122, 255, 0.45);
  --bc-focus-ring-danger: 0 0 0 3px rgba(255, 59, 48, 0.45);

  /* ----- Typography ----------------------------------------- */
  --bc-font-text:    'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --bc-font-display: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --bc-font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  --bc-font-features: normal;

  /* HIG type scale — values in rem, base 16px */
  --bc-text-large-title: 2.125rem;  /* 34 */
  --bc-text-title-1:     1.75rem;   /* 28 */
  --bc-text-title-2:     1.375rem;  /* 22 */
  --bc-text-title-3:     1.25rem;   /* 20 */
  --bc-text-headline:    1.0625rem; /* 17 semibold */
  --bc-text-body:        1.0625rem; /* 17 */
  --bc-text-callout:     1rem;      /* 16 */
  --bc-text-subhead:     0.9375rem; /* 15 */
  --bc-text-footnote:    0.8125rem; /* 13 */
  --bc-text-caption-1:   0.75rem;   /* 12 */
  --bc-text-caption-2:   0.6875rem; /* 11 */

  --bc-leading-tight:   1.2;
  --bc-leading-snug:    1.35;
  --bc-leading-normal:  1.5;
  --bc-leading-relaxed: 1.6;

  --bc-weight-regular:  400;
  --bc-weight-medium:   500;
  --bc-weight-semibold: 600;
  --bc-weight-bold:     700;

  --bc-tracking-tight:  -0.014em;
  --bc-tracking-normal: 0;
  --bc-tracking-wide:   0.04em;

  /* ----- Spacing — 4/8 pt rhythm ---------------------------- */
  --bc-space-0:  0;
  --bc-space-1:  0.25rem; /* 4  */
  --bc-space-2:  0.5rem;  /* 8  */
  --bc-space-3:  0.75rem; /* 12 */
  --bc-space-4:  1rem;    /* 16 */
  --bc-space-5:  1.25rem; /* 20 */
  --bc-space-6:  1.5rem;  /* 24 */
  --bc-space-7:  2rem;    /* 32 */
  --bc-space-8:  2.5rem;  /* 40 */
  --bc-space-9:  3rem;    /* 48 */
  --bc-space-10: 4rem;    /* 64 */
  --bc-space-11: 5rem;    /* 80 */

  /* ----- Radii — HIG continuous curves ---------------------- */
  --bc-radius-xs:    4px;
  --bc-radius-sm:    8px;
  --bc-radius-md:    10px;
  --bc-radius-lg:    12px;
  --bc-radius-xl:    16px;
  --bc-radius-2xl:   20px;
  --bc-radius-pill:  9999px;

  /* ----- Shadows — restrained; depth is for layering, not decoration */
  --bc-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03);
  --bc-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --bc-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.04);
  --bc-shadow-sheet: 0 24px 64px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.08);

  /* ----- Motion — Apple-style springs ----------------------- */
  --bc-ease-standard: cubic-bezier(0.32, 0.72, 0, 1);
  --bc-ease-emphasized: cubic-bezier(0.2, 0.9, 0.1, 1);
  --bc-ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --bc-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --bc-duration-fast:   140ms;
  --bc-duration-base:   220ms;
  --bc-duration-slow:   320ms;
  --bc-duration-slower: 400ms;

  /* ----- Z-index scale ------------------------------------- */
  --bc-z-base:    0;
  --bc-z-sticky:  100;
  --bc-z-overlay: 1000;
  --bc-z-sheet:   1050;
  --bc-z-toast:   1100;
  --bc-z-tooltip: 1200;
  --bc-z-welcome: 10400; /* above Phoenix nav (1020–1030), below service banners */
  --bc-z-service-banner: 1080; /* above Phoenix fixed-top navbar (1030) */

  /* ----- Control sizing ------------------------------------ */
  --bc-control-h-sm: 28px;
  --bc-control-h-md: 36px;
  --bc-control-h-lg: 44px; /* HIG touch target floor */

  /* ----- Layout -------------------------------------------- */
  --bc-content-max:        1320px;
  --bc-readable-max:       72ch;
  --bc-sticky-header-h:    64px;
  --bc-chart-h:            18rem;
}

/* ----- Dark mode -------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-bc-theme="light"]) {
    --bc-color-blue:        #0a84ff;
    --bc-color-green:       #30d158;
    --bc-color-indigo:      #5e5ce6;
    --bc-color-orange:      #ff9f0a;
    --bc-color-pink:        #ff375f;
    --bc-color-purple:      #bf5af2;
    --bc-color-red:         #ff453a;
    --bc-color-teal:        #40c8e0;
    --bc-color-yellow:      #ffd60a;

    --bc-gray-1: #8e8e93;
    --bc-gray-2: #636366;
    --bc-gray-3: #48484a;
    --bc-gray-4: #3a3a3c;
    --bc-gray-5: #2c2c2e;
    --bc-gray-6: #1c1c1e;

    --bc-bg-base:       #000000;
    --bc-bg-elevated:   #1c1c1e;
    --bc-bg-grouped:    #1c1c1e;
    --bc-bg-subtle:     #141416;
    --bc-bg-hover:      rgba(255, 255, 255, 0.06);
    --bc-bg-pressed:    rgba(255, 255, 255, 0.10);

    --bc-text-primary:    #ffffff;
    --bc-text-secondary:  rgba(235, 235, 245, 0.80);
    --bc-text-tertiary:   rgba(235, 235, 245, 0.60);
    --bc-text-quaternary: rgba(235, 235, 245, 0.30);

    --bc-separator:        rgba(84, 84, 88, 0.65);
    --bc-separator-strong: rgba(84, 84, 88, 0.90);
    --bc-border-field:     rgba(235, 235, 245, 0.24);
    --bc-scrim:            rgba(0, 0, 0, 0.60);

    --bc-accent:         var(--bc-color-blue);
    --bc-accent-hover:   #2c95ff;
    --bc-accent-pressed: #4ea5ff;
    --bc-accent-tint:    rgba(10, 132, 255, 0.20);

    --bc-destructive:         var(--bc-color-red);
    --bc-destructive-hover:   #ff5d54;
    --bc-destructive-pressed: #ff7770;
    --bc-destructive-tint:    rgba(255, 69, 58, 0.22);

    --bc-success-tint: rgba(48, 209, 88, 0.22);
    --bc-warning-tint: rgba(255, 159, 10, 0.22);
    --bc-info-tint:    rgba(64, 200, 224, 0.22);

    --bc-focus-ring:        0 0 0 3px rgba(10, 132, 255, 0.55);
    --bc-focus-ring-danger: 0 0 0 3px rgba(255, 69, 58, 0.55);

    --bc-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.50);
    --bc-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.50);
    --bc-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.60);
    --bc-shadow-sheet: 0 24px 64px rgba(0, 0, 0, 0.70);
  }
}

/* ----- Manual override (rep toggles theme) ------------------ */
:root[data-bc-theme="dark"] {
  --bc-color-blue:        #0a84ff;
  --bc-color-green:       #30d158;
  --bc-color-indigo:      #5e5ce6;
  --bc-color-orange:      #ff9f0a;
  --bc-color-pink:        #ff375f;
  --bc-color-purple:      #bf5af2;
  --bc-color-red:         #ff453a;
  --bc-color-teal:        #40c8e0;
  --bc-color-yellow:      #ffd60a;

  --bc-gray-1: #8e8e93;
  --bc-gray-2: #636366;
  --bc-gray-3: #48484a;
  --bc-gray-4: #3a3a3c;
  --bc-gray-5: #2c2c2e;
  --bc-gray-6: #1c1c1e;

  --bc-bg-base:       #000000;
  --bc-bg-elevated:   #1c1c1e;
  --bc-bg-grouped:    #1c1c1e;
  --bc-bg-subtle:     #141416;
  --bc-bg-hover:      rgba(255, 255, 255, 0.06);
  --bc-bg-pressed:    rgba(255, 255, 255, 0.10);

  --bc-text-primary:    #ffffff;
  --bc-text-secondary:  rgba(235, 235, 245, 0.80);
  --bc-text-tertiary:   rgba(235, 235, 245, 0.60);
  --bc-text-quaternary: rgba(235, 235, 245, 0.30);

  --bc-separator:        rgba(84, 84, 88, 0.65);
  --bc-separator-strong: rgba(84, 84, 88, 0.90);
  --bc-border-field:     rgba(235, 235, 245, 0.24);
  --bc-scrim:            rgba(0, 0, 0, 0.60);

  --bc-accent:         var(--bc-color-blue);
  --bc-accent-hover:   #2c95ff;
  --bc-accent-pressed: #4ea5ff;
  --bc-accent-tint:    rgba(10, 132, 255, 0.20);

  --bc-destructive:         var(--bc-color-red);
  --bc-destructive-hover:   #ff5d54;
  --bc-destructive-pressed: #ff7770;
  --bc-destructive-tint:    rgba(255, 69, 58, 0.22);

  --bc-focus-ring:        0 0 0 3px rgba(10, 132, 255, 0.55);
  --bc-focus-ring-danger: 0 0 0 3px rgba(255, 69, 58, 0.55);

  --bc-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.50);
  --bc-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.50);
  --bc-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.60);
  --bc-shadow-sheet: 0 24px 64px rgba(0, 0, 0, 0.70);
}

/* ----- Reduced motion --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --bc-duration-fast:   1ms;
    --bc-duration-base:   1ms;
    --bc-duration-slow:   1ms;
    --bc-duration-slower: 1ms;
  }
}