/* ============================================================================
   LEASE RATER — DESIGN TOKENS
   ============================================================================
   Single source of truth for colour, type, space, radius and elevation.

   This file declares custom properties only. It applies no styles and changes
   nothing visually on its own — it is the layer every other stylesheet reads
   from. Load it FIRST, ahead of every other stylesheet.

   Principles this encodes:
     - Colour is an accent, never a ground. Brand green appears as a mark
       (a rule, a bar, the nav band), not as a surface behind content.
     - One type scale. Figures always use tabular-nums.
     - Hairlines carry separation; shadow is reserved for genuinely
       floating elements (dropdowns, modals).
   ============================================================================ */

:root {

  /* --- Ink ------------------------------------------------------------- */
  --lr-ink:            #1D1D1F;  /* figures, headings, body copy           */
  --lr-ink-secondary:  #6E6E73;  /* labels, supporting copy                */
  --lr-ink-tertiary:   #8E948F;  /* metadata, timestamps, units            */
  --lr-ink-inverse:    #FFFFFF;  /* text on brand grounds                  */

  /* --- Surfaces --------------------------------------------------------- */
  /* Neutrals carry a faint green bias so they read as chosen rather than
     inherited from a browser reset. */
  --lr-canvas:         #FFFFFF;
  --lr-surface:        #F3F6F4;  /* subtle panels, table stripes           */
  --lr-surface-sunken: #EDF1EF;  /* page ground behind cards               */

  /* --- Hairlines -------------------------------------------------------- */
  --lr-hairline:       #D8DEDA;  /* card edges, section rules              */
  --lr-hairline-soft:  #EBEFED;  /* rules inside a card                    */

  /* --- Brand ------------------------------------------------------------ */
  --lr-brand:          #0B6E4F;  /* buttons, links, rules, data bars       */
  --lr-brand-hover:    #0A5C42;
  --lr-brand-deep:     #08503A;  /* nav band, PDF letterhead ONLY          */
  --lr-brand-tint:     #F0F7F4;  /* selected rows, subtle fills            */
  --lr-brand-edge:     #D6E7DF;  /* border paired with brand-tint          */

  /* --- Risk bands ------------------------------------------------------- */
  /* Deliberately desaturated: a report carrying fourteen of these must stay
     readable. Meaning sits in the label; colour only reinforces it. */
  --lr-band-excellent:     #14724E;
  --lr-band-strong:        #3D8168;
  --lr-band-satisfactory:  #6E6E73;
  --lr-band-fair:          #A16207;
  --lr-band-weak:          #B45309;
  --lr-band-vulnerable:    #9F1239;

  --lr-band-excellent-bg:     rgba(20, 114, 78, .08);
  --lr-band-strong-bg:        rgba(61, 129, 104, .09);
  --lr-band-satisfactory-bg:  rgba(110, 110, 115, .09);
  --lr-band-fair-bg:          rgba(161, 98, 7, .09);
  --lr-band-weak-bg:          rgba(180, 83, 9, .09);
  --lr-band-vulnerable-bg:    rgba(159, 18, 57, .08);

  /* --- Status ----------------------------------------------------------- */
  /* Separate from brand: semantic colour must never be mistaken for accent. */
  --lr-danger:       #9F1239;
  --lr-danger-bg:    #FDF2F4;
  --lr-danger-edge:  #F0D4DA;
  --lr-warning:      #A16207;
  --lr-warning-bg:   #FDFBF5;
  --lr-warning-edge: #E7DFC8;
  --lr-success:      #14724E;
  --lr-success-bg:   #F0F7F4;

  /* --- Type ------------------------------------------------------------- */
  --lr-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
             Roboto, Helvetica, Arial, sans-serif;
  --lr-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;

  --lr-text-display:  58px;  /* the headline rate, one per page            */
  --lr-text-h1:       24px;
  --lr-text-h2:       19px;
  --lr-text-h3:       16px;
  --lr-text-body:     14px;
  --lr-text-small:    13px;
  --lr-text-caption:  11px;  /* uppercase, tracked, above a value          */

  --lr-weight-regular: 400;
  --lr-weight-medium:  500;
  --lr-weight-semi:    600;

  --lr-tracking-display: -.035em;
  --lr-tracking-h1:      -.02em;
  --lr-tracking-h2:      -.015em;
  --lr-tracking-caption:  .1em;

  --lr-leading-tight: 1.15;
  --lr-leading-body:  1.55;

  /* --- Space (8pt grid) -------------------------------------------------- */
  --lr-space-1:  4px;
  --lr-space-2:  8px;
  --lr-space-3:  12px;
  --lr-space-4:  16px;
  --lr-space-5:  24px;
  --lr-space-6:  32px;
  --lr-space-7:  48px;
  --lr-space-8:  64px;

  /* --- Radius ------------------------------------------------------------ */
  --lr-radius-control: 7px;
  --lr-radius-card:    10px;
  --lr-radius-pill:    980px;

  /* --- Elevation --------------------------------------------------------- */
  /* Only two. Everything else separates with a hairline. */
  --lr-shadow-sm: 0 1px 3px rgba(16, 24, 20, .08), 0 1px 2px rgba(16, 24, 20, .04);
  --lr-shadow-md: 0 8px 28px rgba(16, 24, 20, .14);

  /* --- Layout ------------------------------------------------------------ */
  --lr-measure:       1040px;  /* card / content max width                  */
  --lr-measure-wide:  1200px;  /* dashboard, tables                         */
  --lr-gutter:        20px;

  /* --- Motion ------------------------------------------------------------ */
  --lr-transition: 140ms cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --lr-transition: 0ms; }
}