/* ============================================================
   FS25 Portal — Design tokens
   ------------------------------------------------------------
   Direction: "equipment data plate".

   The portal documents a fleet of mods, so it borrows the visual
   language of the machines those mods simulate: enamelled olive
   bodywork, stamped metal spec plates, harvest amber signal
   paint, and monospaced serial data.

   Everything downstream derives from this file. Do not hardcode
   a colour, size, or font anywhere else.
   ============================================================ */

:root {
  /* --- Surfaces -------------------------------------------------
     Warm olive-black rather than the blue-black of stock dark UI.
     Reads as painted machinery, not a terminal. */
  --bg:            #12140F;
  --bg-sunk:       #0D0F0A;   /* recessed wells: inputs, code, table headers */
  --surface:       #1B1E16;   /* the default panel                            */
  --surface-2:     #22261C;   /* raised: hover, nested panel, active row      */
  --surface-3:     #2A2F22;   /* highest: dropdowns, modals, tooltips         */

  --border:        #333829;
  --border-strong: #4A5139;
  --border-faint:  #23271C;

  /* --- Ink ----------------------------------------------------- */
  --text:          #EDEBE0;   /* warm off-white, not pure #FFF */
  --text-dim:      #A3A692;
  --text-faint:    #71755F;

  /* --- Signal colours ------------------------------------------
     Drawn from agricultural machinery livery. Amber is the single
     primary accent; everything else is reserved for state. */
  --amber:         #E9A83C;
  --amber-bright:  #F7C061;
  --amber-dim:     #A8752A;
  --amber-soft:    rgba(233, 168, 60, 0.12);
  --amber-line:    rgba(233, 168, 60, 0.32);

  --green:         #86B63D;
  --green-soft:    rgba(134, 182, 61, 0.12);
  --green-line:    rgba(134, 182, 61, 0.32);

  /* Lightened from #D2543B, which measured 4.08:1 on --surface and failed
     WCAG AA. This clears 4.5:1 against every surface in the system. */
  --red:           #E4735C;
  --red-soft:      rgba(228, 115, 92, 0.12);
  --red-line:      rgba(228, 115, 92, 0.34);

  --steel:         #7B9DB5;
  --steel-soft:    rgba(123, 157, 181, 0.12);
  --steel-line:    rgba(123, 157, 181, 0.30);

  /* Semantic aliases — prefer these in components. */
  --accent:        var(--amber);
  --accent-hover:  var(--amber-bright);
  --accent-soft:   var(--amber-soft);
  --success:       var(--green);
  --success-soft:  var(--green-soft);
  --warning:       var(--amber);
  --warning-soft:  var(--amber-soft);
  --danger:        var(--red);
  --danger-soft:   var(--red-soft);
  --info:          var(--steel);
  --info-soft:     var(--steel-soft);

  /* Roadmap / workflow states read as a progression, not three
     unrelated pills: dormant steel -> active amber -> harvested green. */
  --state-planned:     var(--steel);
  --state-progress:    var(--amber);
  --state-done:        var(--green);

  /* --- Type ----------------------------------------------------
     Display : Barlow Condensed — condensed industrial grotesque, the
               lettering stencilled onto equipment panels.
     Body    : IBM Plex Sans — engineered for technical documentation;
               humanist enough to read warm at long lengths.
     Mono    : IBM Plex Mono — versions, dates, IDs, counts. These are
               genuinely machine data, so monospace is honest here
               rather than decorative. */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --fs-2xs:  0.6875rem;  /* 11px — plate micro-labels             */
  --fs-xs:   0.75rem;    /* 12px — mono data, captions            */
  --fs-sm:   0.8125rem;  /* 13px — secondary UI                   */
  --fs-base: 0.9375rem;  /* 15px — body copy                      */
  --fs-md:   1.0625rem;  /* 17px — lead paragraphs                */
  --fs-lg:   1.375rem;   /* 22px — card titles                    */
  --fs-xl:   1.875rem;   /* 30px — page titles                    */
  --fs-2xl:  2.5rem;     /* 40px — hero                           */
  --fs-3xl:  3.25rem;    /* 52px — display numerals               */

  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-normal: 1.6;

  /* Condensed display type needs a touch of tracking when set in
     caps, otherwise the counters close up at small sizes. */
  --track-plate: 0.08em;
  --track-caps:  0.04em;

  /* --- Space (4px base) ---------------------------------------- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;

  /* --- Geometry -------------------------------------------------
     Stamped plate, not a soft bubble. Radii stay in the 2-4px range;
     this single choice does most of the work separating the portal
     from stock rounded-card dark UI. */
  --r-sm: 2px;
  --r:    3px;
  --r-lg: 4px;
  /* Capsules and circles are the only sanctioned exceptions, and they exist
     for genuinely round things — count bubbles, switch tracks, meter caps —
     never for panels. */
  --r-pill:  999px;
  --r-round: 50%;

  --hairline: 1px;
  --plate-edge: 3px;   /* the amber left edge that marks a spec plate */

  /* --- Depth ---------------------------------------------------
     Machinery panels sit flat. Depth comes from a top highlight and
     a grounded shadow rather than a diffuse glow. */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow:      0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-lg:   0 12px 32px rgba(0, 0, 0, 0.55);
  --edge-light:  inset 0 1px 0 rgba(255, 255, 255, 0.045);

  /* Overlay + texture */
  --scrim:        rgba(0, 0, 0, 0.72);   /* modal backdrop        */
  --tramline-ink: rgba(255, 255, 255, 0.014); /* body field lines */

  /* --- Motion -------------------------------------------------- */
  --t-fast: 90ms;
  --t:      150ms;
  --t-slow: 260ms;
  --ease:   cubic-bezier(0.2, 0, 0.2, 1);

  /* --- Frame --------------------------------------------------- */
  --nav-height:   58px;
  --container:    1180px;
  --container-narrow: 760px;
}