/* ==========================================================================
   Bobby's Car Wash & Auto Sales — Portal design tokens
   --------------------------------------------------------------------------
   Direction: industrial-premium automotive software. Near-black chrome
   header, dark charcoal working surfaces, one red hairline carrying the
   brand's only accent colour.

   Signature decision: THE RED HAIRLINE. A 3px red rule sits under the
   header and reappears as a 3px edge on whatever is currently active
   (selected tab, open record, chosen vehicle type). Brand reason: the red
   swoosh is the single red element in Bobby's identity — the app borrows it
   as a position marker instead of repainting the interface red. Outcome:
   the operator always knows where they are without reading a label.

   Every value below is measured off the two approved 4K mockups
   (specs/bobby/home-screen.png, specs/bobby/scout-page.png) at their
   1920-wide logical scale.
   ========================================================================== */

:root {
  /* ---- Surfaces ----------------------------------------------------
     Three of these are published as RGB triples as well as colours. A
     feathered avatar edge (see .avatar-feather in components.css) needs
     its backdrop colour at zero alpha, which a hex value cannot give it.
     The triple is the source and the colour is derived from it, so the
     two can never drift apart. Hex kept in the comment: these are the
     values measured off the approved mockups. */
  --c-header-rgb:     8 9 10;
  --c-header:      rgb(var(--c-header-rgb));    /* #08090a header bar — near black, as per mockup */
  --c-bg:          #17191b;  /* page background — dark charcoal          */
  --c-surface-rgb:   33 36 40;
  --c-surface:     rgb(var(--c-surface-rgb));   /* #212428 cards, panels, table body */
  --c-surface-2-rgb: 38 42 46;
  --c-surface-2:   rgb(var(--c-surface-2-rgb)); /* #262a2e search field, type tiles, table head */
  --c-surface-3:   #2f343a;  /* hover state                              */
  --c-surface-4:   #383e45;  /* pressed / thumbnail tile                 */

  /* ---- Lines ------------------------------------------------------- */
  --c-line:        #32363b;  /* panel + control borders                  */
  --c-line-soft:   #292d31;  /* row separators inside a panel            */

  /* ---- Brand + status ---------------------------------------------- */
  --c-red:         #e01f26;  /* the accent. Logo swoosh, primary action  */
  --c-red-hi:      #f2373e;  /* hover                                    */
  --c-red-lo:      #b81a20;  /* active/pressed                           */
  --c-gold:        #e9b23c;  /* focus ring                               */
  --c-green:       #35c95a;  /* money, free shipping, online             */
  --c-green-dim:   #1f7a37;
  --c-star:        #f5b301;  /* supplier rating                          */
  --c-amber:       #d9902a;  /* "needs attention" status                 */
  --c-blue:        #4a90d9;  /* informational status                     */

  /* ---- Text -------------------------------------------------------- */
  --c-text:        #ffffff;
  --c-text-2:      #b3b8be;  /* secondary — 8.9:1 on --c-surface         */
  --c-text-3:      #969ca3;  /* muted     — 5.2:1 on --c-surface, AA     */
  --c-text-on-red: #ffffff;  /* 5.2:1 on --c-red, AA for normal text     */

  /* ---- Radii ------------------------------------------------------- */
  --r-card:  14px;
  --r-tile:  12px;
  --r-btn:    8px;
  --r-pill:  999px;

  /* ---- Spacing scale (rem, scales with the root size below) --------- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  2.5rem;
  --s-8:  3.5rem;

  /* ---- Type -------------------------------------------------------- */
  /* A neutral grotesque, matching the mockups' UI face. Chosen as a
     system stack deliberately: the build must run with no install step
     and no network fetch, so a webfont could neither be vendored nor
     loaded. Tracking and weight below do the work a display face would. */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display",
             "Segoe UI", "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif;

  --t-display: 2.125rem;  /* 34px — agent name in header                */
  --t-h1:      2rem;      /* 32px — screen titles                       */
  --t-h2:      1.5rem;    /* 24px — panel titles, card titles           */
  --t-h3:      1.3125rem; /* 21px — row primary                         */
  --t-body:    1.125rem;  /* 18px                                       */
  --t-sm:      1rem;      /* 16px — secondary row text                  */
  --t-xs:      0.875rem;  /* 14px — meta                                */
  --t-micro:   0.75rem;   /* 12px — pills, labels                       */

  /* ---- Structure ---------------------------------------------------- */
  --header-h:  9.375rem;  /* 150px at mockup scale                      */
  --rail-w:    33rem;     /* 528px — Scout's right-hand rail            */
  --page-x:    3.5rem;    /* 56px page gutter                           */
  --page-max:  120rem;    /* 1920px                                     */

  /* ---- Motion ------------------------------------------------------- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:  120ms;
  --dur:       200ms;
  --dur-slow:  320ms;

  --shadow-panel: 0 1px 0 rgba(255, 255, 255, 0.02) inset,
                  0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lift:  0 12px 32px rgba(0, 0, 0, 0.5);
}

/* Root scale: 1rem === 16px at the mockups' 1920 width, scaling down
   proportionally on narrower desktops so the layout keeps the mockup's
   exact proportions rather than reflowing. Desktop-only by brief. */
html {
  font-size: clamp(12px, 0.8333vw, 16px);
}