/* ==========================================================================
   Crescent Air -- design tokens
   Single source of truth for colour, type, space, shape, depth and motion.
   Components reference tokens only; no raw hex or px values live in
   components.css or app.css.
   ========================================================================== */

:root {
  /* --- Neutrals -----------------------------------------------------------
     A cool slate ramp. Field-service software is read under fluorescent
     light and in vans; warm greys go muddy, cool greys stay crisp.          */
  --c-ink-950: #080e15;
  --c-ink-900: #0e1a26;
  --c-ink-850: #13222f;
  --c-ink-800: #1a2b3b;
  --c-ink-700: #27394c;
  --c-ink-600: #3c5266;
  --c-ink-500: #566d83;
  --c-ink-400: #7389a0;
  --c-ink-300: #9fb1c3;
  --c-ink-200: #c8d3de;
  --c-ink-150: #dce4ec;
  --c-ink-100: #e9eef4;
  --c-ink-50:  #f4f7fa;
  --c-white:   #ffffff;

  /* --- Brand: service blue ------------------------------------------------
     Deliberately deeper and less saturated than SaaS blue, so it reads as
     equipment and utility rather than marketing.                            */
  --c-brand-900: #0a2e52;
  --c-brand-800: #0d3d6b;
  --c-brand-700: #0e4375;
  --c-brand-600: #114b84;
  --c-brand-500: #1a66b0;
  --c-brand-400: #3d86cc;
  --c-brand-100: #dce9f6;
  --c-brand-50:  #eff5fc;

  /* --- Cooling / heating --------------------------------------------------
     The two halves of the trade, used as a real semantic axis for service
     type and charts -- not as decoration.                                   */
  --c-cool-700: #095a6e;
  --c-cool-600: #0b6e86;
  --c-cool-500: #0e89a5;
  --c-cool-100: #d9eff4;
  --c-cool-50:  #ecf7fa;

  --c-warm-700: #8a4109;
  --c-warm-600: #a8500f;
  --c-warm-500: #c4651c;
  --c-warm-100: #faeadb;
  --c-warm-50:  #fdf5ee;

  /* --- Status -------------------------------------------------------------
     Each pairs a 600 for text/marks with a 100 for fills. Every use is
     accompanied by a text label; colour never carries meaning alone.        */
  --c-ok-600:      #0f6b47;
  --c-ok-100:      #daefe5;
  --c-ok-50:       #edf8f2;

  --c-warn-600:    #a8630b;
  --c-warn-100:    #faedd7;
  --c-warn-50:     #fdf7ec;

  --c-danger-600:  #a8261c;
  --c-danger-100:  #fae0dd;
  --c-danger-50:   #fdf0ef;

  --c-neutral-600: #5b7189;
  --c-neutral-100: #e4eaf1;
  --c-neutral-50:  #f1f5f9;

  /* --- Surfaces ---------------------------------------------------------- */
  --surface-app:      var(--c-ink-50);
  --surface-card:     var(--c-white);
  --surface-sunken:   #eef2f7;
  --surface-hover:    #f7f9fc;
  --surface-nav:      var(--c-ink-900);
  --surface-nav-sub:  var(--c-ink-850);
  --surface-nav-active: var(--c-brand-700);
  --surface-overlay:  var(--c-white);
  --surface-scrim:    rgba(8, 14, 21, 0.5);

  /* --- Borders ------------------------------------------------------------
     Hairlines do the structural work in this interface, which is why there
     are three weights rather than one.                                      */
  --border-subtle:  #e5ebf2;
  --border-default: #d5dfe9;
  --border-strong:  #bbc9d8;
  --border-nav:     rgba(255, 255, 255, 0.09);
  --border-focus:   var(--c-brand-500);

  /* --- Text -------------------------------------------------------------- */
  --text-primary:    var(--c-ink-900);
  --text-secondary:  #46607a;
  --text-muted:      #6b8098;
  --text-disabled:   var(--c-ink-300);
  --text-inverse:    var(--c-white);
  --text-link:       var(--c-brand-600);
  --text-nav:        #9db0c4;
  --text-nav-active: var(--c-white);
  --text-nav-muted:  #62788e;
}

:root {
  /* --- Typography ---------------------------------------------------------
     Fira Sans: humanist, engineered, and designed for small sizes on poor
     screens -- which is exactly the dispatch desk. Fira Mono is reserved for
     genuinely tabular data (times, work-order numbers, currency in tables)
     where column alignment carries meaning. It is never used for labels.    */
  --font-sans: "Fira Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Fira Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-tight:  -0.015em;
  --ls-normal: 0;
  --ls-wide:   0.01em;

  /* --- Space --------------------------------------------------------------
     4px base on a dense scale. An operations console earns its keep by
     showing more per screen, so the steps stay tight.                       */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-7:  2rem;
  --s-8:  2.5rem;
  --s-9:  3rem;
  --s-10: 4rem;

  /* --- Shape --------------------------------------------------------------
     Capped at 8px. Large radii make data look like marketing cards.         */
  --r-xs:   3px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   8px;
  --r-pill: 999px;

  /* --- Depth --------------------------------------------------------------
     Cards use a border plus xs only. sm and above are reserved for things
     that genuinely float above the page.                                    */
  --sh-xs: 0 1px 1px rgba(14, 26, 38, 0.04);
  --sh-sm: 0 1px 3px rgba(14, 26, 38, 0.08), 0 1px 2px rgba(14, 26, 38, 0.04);
  --sh-md: 0 6px 16px rgba(14, 26, 38, 0.10), 0 2px 4px rgba(14, 26, 38, 0.05);
  --sh-lg: 0 16px 40px rgba(14, 26, 38, 0.16), 0 4px 8px rgba(14, 26, 38, 0.06);

  --ring: 0 0 0 3px rgba(26, 102, 176, 0.32);
  --ring-danger: 0 0 0 3px rgba(168, 38, 28, 0.26);

  /* --- Layout -------------------------------------------------------------
     Sizes chosen so the KPI row and the dispatch board both sit above the
     fold at 1366x768, the smallest target resolution.                       */
  --sidebar-w:           236px;
  --sidebar-collapsed-w: 64px;
  --topbar-h:            56px;
  --page-gutter:         var(--s-6);
  --page-max:            1760px;
  --card-pad:            var(--s-5);

  /* --- Motion -------------------------------------------------------------
     Short and functional. Motion here confirms a user action; nothing
     animates on its own.                                                    */
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 260ms;
  --ease:   cubic-bezier(0.32, 0.72, 0.4, 1);

  /* --- Elevation order --------------------------------------------------- */
  --z-base:     1;
  --z-sticky:   40;
  --z-sidebar:  60;
  --z-topbar:   50;
  --z-dropdown: 70;
  --z-scrim:    80;
  --z-drawer:   90;
  --z-toast:    100;
}

/* Honour the operating-system preference for reduced motion everywhere.
   Transitions collapse to near-zero rather than being removed, so state
   changes still register as changes. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms;
    --t-base: 1ms;
    --t-slow: 1ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}