/* =========================================================================
   Flagship Command — design tokens
   =========================================================================

   Loaded first. The @layer declaration below fixes the cascade order for the
   whole application regardless of the order the stylesheets actually finish
   downloading in, which is what lets the layout use plain <link> tags (they
   fetch in parallel) instead of @import (which serialises them).

   Design direction
   ----------------
   A solid navy plate carrying light type. The interface treats that plate as
   its structural element rather than as an accent colour: the navigation rail
   *is* the plate, the dealer's logo is printed on it, and every document
   number is set in a small ruled plate of its own. What everyone in this
   business reads aloud down a phone line is a number — WO-2026-00147, a
   camera's serial — so numbers get the deliberate typography here, in
   monospace with the digits letterspaced far enough apart to be dictated
   without transcription errors.

   The navy belongs to the PRODUCT and stays put across white-label installs;
   only the artwork on the plate (`public/img/customlogo.png`) is replaced. A
   palette that moved with each client would mean re-checking every status
   colour against a new ground on every sale, and the status colours are the
   ones carrying meaning.

   Colour carries meaning and nothing else. Navy is the only decorative
   colour; every other hue in the interface encodes a state, because in a
   dispatch tool a colour that means nothing is noise on a screen someone
   stares at for eight hours.

   Typeface: IBM Plex Sans and IBM Plex Mono, self-hosted in /public/fonts.
   Plex was drawn for technical documentation, its mono has unmistakable
   0/O and 1/l shapes, and the pair carries the plainspoken industrial tone of
   the trade this is sold into.
   ========================================================================= */

@layer reset, tokens, base, layout, components, utilities;

@layer tokens {

  /* --- typefaces ------------------------------------------------------ */

  @font-face {
    font-family: 'IBM Plex Sans';
    src: url('/fonts/IBMPlexSans-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
  }
  @font-face {
    font-family: 'IBM Plex Sans';
    src: url('/fonts/IBMPlexSans-Italic.woff2') format('woff2');
    font-weight: 400; font-style: italic; font-display: swap;
  }
  @font-face {
    font-family: 'IBM Plex Sans';
    src: url('/fonts/IBMPlexSans-Medium.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
  }
  @font-face {
    font-family: 'IBM Plex Sans';
    src: url('/fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
  }
  @font-face {
    font-family: 'IBM Plex Sans';
    src: url('/fonts/IBMPlexSans-Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
  }
  @font-face {
    font-family: 'IBM Plex Mono';
    src: url('/fonts/IBMPlexMono-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
  }
  @font-face {
    font-family: 'IBM Plex Mono';
    src: url('/fonts/IBMPlexMono-Medium.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
  }
  @font-face {
    font-family: 'IBM Plex Mono';
    src: url('/fonts/IBMPlexMono-SemiBold.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
  }

  :root {
    --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    /* --- brand -------------------------------------------------------- */
    /* #000080 is lifted straight out of the logo artwork. */
    --brand:        #000080;
    --brand-deep:   #00005e;
    --brand-lift:   #1d1da8;
    --brand-tint:   #ececf7;
    --brand-on:     #ffffff;

    /* --- neutrals ----------------------------------------------------- */
    /* The canvas is a warm grey rather than white so that white cards and
       the white paper of a printed ticket read as foreground objects. */
    --paper:        #f4f3ef;
    --surface:      #ffffff;
    --surface-sunk: #faf9f6;
    --surface-alt:  #f0efea;

    --ink:          #191c2e;
    --ink-muted:    #575c73;
    --ink-faint:    #83879b;
    --ink-on-brand: #ffffff;

    --rule:         #e2e0d9;
    --rule-strong:  #c9c6bb;

    /* --- signals ------------------------------------------------------ */
    /* Each of these means one thing. Do not use them for decoration. */
    --ok:        #14653c;   --ok-tint:     #e5f2ea;
    --warn:      #8f5300;   --warn-tint:   #fbf0df;
    --danger:    #a01c15;   --danger-tint: #fbe9e7;
    --info:      #0f4c75;   --info-tint:   #e6eff6;
    --neutral:   #5b6070;   --neutral-tint:#eeedea;

    /* --- type scale --------------------------------------------------- */
    /* Dense by design: this is a tool people keep open all day, and every
       extra pixel of leading is a row that falls off the bottom. */
    --t-2xs:  0.625rem;   /* 10px — plate labels */
    --t-xs:   0.6875rem;  /* 11px — column headers, eyebrows */
    --t-sm:   0.8125rem;  /* 13px — table cells, secondary text */
    --t-base: 0.875rem;   /* 14px — UI default */
    --t-md:   1rem;       /* 16px — lead paragraphs */
    --t-lg:   1.1875rem;  /* 19px — card titles */
    --t-xl:   1.5rem;     /* 24px — page titles */
    --t-2xl:  2rem;       /* 32px — dashboard figures */
    --t-3xl:  2.75rem;    /* 44px — the largest display size */

    --lh-tight: 1.2;
    --lh-snug:  1.35;
    --lh-body:  1.55;

    /* Column headers and eyebrows are set as small caps with wide tracking:
       the vocabulary of a printed service form, and it keeps them legible at
       11px without resorting to bold. */
    --track-label: 0.085em;
    --track-doc:   0.06em;

    /* --- space -------------------------------------------------------- */
    --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
    --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;

    /* --- shape -------------------------------------------------------- */
    /* Small radii only. This is equipment, not a consumer app. */
    --r-sm: 3px;
    --r:    5px;
    --r-lg: 8px;

    --shadow-1: 0 1px 2px rgba(25, 28, 46, 0.07), 0 1px 1px rgba(25, 28, 46, 0.04);
    --shadow-2: 0 4px 12px rgba(25, 28, 46, 0.10), 0 1px 3px rgba(25, 28, 46, 0.06);
    --shadow-3: 0 16px 40px rgba(25, 28, 46, 0.18), 0 2px 8px rgba(25, 28, 46, 0.08);

    /* --- structure ---------------------------------------------------- */
    --rail-w: 15.5rem;
    --rail-w-collapsed: 4rem;

    /* Tall enough for the logo to sit in the rail's brand band at a legible
       size, with the top bar aligning to the same line across the fold. */
    --topbar-h: 4rem;

    --content-max: 92rem;

    --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand-lift);

    --ease: cubic-bezier(0.2, 0, 0.15, 1);
  }

  /* --- dark theme -------------------------------------------------------
     Same tokens, re-pointed. Nothing outside this block knows the theme
     exists, which is what keeps the print stylesheet and the PDF templates
     from ever drifting away from the screen.

     Navy at #000080 is unreadable on a dark ground, so the brand steps up in
     lightness while keeping its hue — the rail stays recognisably the same
     plate.
     -------------------------------------------------------------------- */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --brand:        #2f2fbe;
      --brand-deep:   #1a1a7a;
      --brand-lift:   #4b4bd6;
      --brand-tint:   #1b1d33;
      --brand-on:     #ffffff;

      --paper:        #101220;
      --surface:      #191c2c;
      --surface-sunk: #141724;
      --surface-alt:  #212436;

      --ink:          #e9eaf0;
      --ink-muted:    #a5a9bb;
      --ink-faint:    #7c8195;

      --rule:         #2b2f44;
      --rule-strong:  #3d4258;

      --ok:        #57bd8a;   --ok-tint:     #14291f;
      --warn:      #d99a34;   --warn-tint:   #2b2113;
      --danger:    #e2776c;   --danger-tint: #2e1917;
      --info:      #6aa6d6;   --info-tint:   #14212e;
      --neutral:   #9aa0b3;   --neutral-tint:#22263a;

      --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
      --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.55);
      --shadow-3: 0 18px 48px rgba(0, 0, 0, 0.65);

      --focus: 0 0 0 2px var(--paper), 0 0 0 4px #6f6fe8;
    }
  }

  :root[data-theme="dark"] {
    --brand:        #2f2fbe;
    --brand-deep:   #1a1a7a;
    --brand-lift:   #4b4bd6;
    --brand-tint:   #1b1d33;
    --brand-on:     #ffffff;

    --paper:        #101220;
    --surface:      #191c2c;
    --surface-sunk: #141724;
    --surface-alt:  #212436;

    --ink:          #e9eaf0;
    --ink-muted:    #a5a9bb;
    --ink-faint:    #7c8195;

    --rule:         #2b2f44;
    --rule-strong:  #3d4258;

    --ok:        #57bd8a;   --ok-tint:     #14291f;
    --warn:      #d99a34;   --warn-tint:   #2b2113;
    --danger:    #e2776c;   --danger-tint: #2e1917;
    --info:      #6aa6d6;   --info-tint:   #14212e;
    --neutral:   #9aa0b3;   --neutral-tint:#22263a;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.55);
    --shadow-3: 0 18px 48px rgba(0, 0, 0, 0.65);

    --focus: 0 0 0 2px var(--paper), 0 0 0 4px #6f6fe8;
  }
}