/* =============================================================================
   LucidLoop - tokens.css :: the SINGLE source of truth for design tokens.
   =============================================================================
   Every color, size, radius, shadow, and motion value in the app is defined
   HERE, once, on :root. Components reference them by name (var(--primary)),
   never by re-typing the value. Change a value here and it changes everywhere.

   Load this file FIRST, before any feature stylesheet. Feature files CONSUME
   these tokens; they must never redefine them. (app.css @imports this file;
   dashboard.html links it directly, since dashboard.html does not load app.css.)
   ============================================================================= */

:root {
  /* ---- Surfaces (palette: Warm Paper) --------------------------------- */
  --surface-canvas:   #fafaf8;   /* page background (warm off-white)        */
  --surface-0:        #ffffff;   /* cards, panels, raised surfaces          */
  --surface-1:        #f7f7f3;   /* subtle inset / alternate row            */
  --surface-2:        #efefea;   /* deeper well / pressed                   */
  --surface-tint:     #eef2f7;   /* selected / active row (cool tint)       */
  --surface-inset:    #fafaf8;   /* inset areas                             */

  /* ---- Borders & hairlines -------------------------------------------- */
  --border:           #d8dce2;   /* default hairline                        */
  --border-strong:    #c4cad4;   /* emphasized / interactive border         */
  --border-faint:     #e7e9ee;   /* faintest internal rule                  */

  /* ---- Foreground / text ---------------------------------------------- */
  --fg-1:             #111827;   /* headings, primary ink                   */
  --fg-2:             #3a4250;   /* body copy                               */
  --fg-3:             #6b7280;   /* secondary / meta                        */
  --fg-muted:         #6b7280;   /* muted (alias of fg-3)                    */
  --fg-label:         #7b8494;   /* uppercase eyebrow / column label        */
  --fg-on-accent:     #ffffff;   /* text on --primary fills                 */

  /* ---- Primary (Trust steel-blue) ------------------------------------- */
  --primary:          #365f8b;   /* buttons, links, active nav              */
  --primary-hover:    #31557c;
  --primary-active:   #294a6e;
  --primary-tint:     #ecf1f5;   /* soft brand fill (active nav bg, chips)  */
  --primary-tint-2:   #d9e3ec;   /* deeper brand fill                       */
  --primary-text:     #365f8b;   /* brand-colored text (= --primary)        */

  /* ---- Status: success ------------------------------------------------ */
  --success:          #4e7763;
  --success-solid:    #709b87;
  --success-bg:       #e9f0ec;
  --success-border:   #cdded5;

  /* ---- Status: warning ------------------------------------------------ */
  --warning:          #8a6f38;
  --warning-solid:    #b89a68;
  --warning-bg:       #f5efe2;
  --warning-callout:  #faf6ec;
  --warning-border:   #e6dac2;

  /* ---- Status: danger ------------------------------------------------- */
  --danger:           #9c5a5a;
  --danger-solid:     #b88383;
  --danger-bg:        #f4e9e9;
  --danger-border:    #e3cccc;

  /* ---- Status: review (HIL) ------------------------------------------- */
  --review:           #4f5b6c;
  --review-solid:     #768396;
  --review-bg:        #edeff2;
  --review-border:    #d6dbe2;

  /* ---- Status: info (brand-adjacent) ---------------------------------- */
  --info:             #375f8b;
  --info-solid:       #375f8b;
  --info-bg:          #e9eef4;
  --info-border:      #cdd9e6;

  /* ---- Status: neutral / inert ---------------------------------------- */
  --neutral:          #5b6575;
  --neutral-bg:       #eef0f3;
  --neutral-border:   #d8dce2;

  /* ---- Fonts ---------------------------------------------------------- */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Menlo', monospace;

  /* ---- Type scale (fixed px; dense desktop) --------------------------- */
  --text-micro: 10px;
  --text-2xs:   11px;
  --text-xs:    12px;
  --text-sm:    13px;
  --text-base:  14px;
  --text-md:    15px;
  --text-lg:    18px;
  --text-xl:    20px;
  --text-2xl:   22px;

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

  /* ---- Line height ---------------------------------------------------- */
  --lh-tight:   1.25;
  --lh-snug:    1.4;
  --lh-normal:  1.55;

  /* ---- Letter spacing ------------------------------------------------- */
  --ls-label:   0.06em;   /* uppercase eyebrow tracking                    */
  --ls-tight:  -0.01em;   /* large titles                                  */

  /* ---- Spacing (pixel-literal: --space-N == N px) --------------------- */
  --space-1:   1px;
  --space-2:   2px;
  --space-3:   3px;
  --space-4:   4px;
  --space-5:   5px;
  --space-6:   6px;
  --space-7:   7px;
  --space-8:   8px;
  --space-9:   9px;
  --space-10: 10px;
  --space-11: 11px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;

  /* ---- Layout constants ----------------------------------------------- */
  --sidebar-width:            220px;
  --dashboard-topbar-height:  64px;
  --panel-width:              380px;
  --check-size:               18px;

  /* ---- Radii ---------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:  10px;
  --radius-xl:  12px;
  --radius-full: 999px;

  /* ---- Shadows & focus ------------------------------------------------ */
  --shadow-xs:    0 1px 2px rgba(20, 28, 46, 0.04);
  --shadow-sm:    0 1px 3px rgba(20, 28, 46, 0.06), 0 1px 2px rgba(20, 28, 46, 0.04);
  --shadow-focus: 0 0 0 3px rgba(55, 95, 139, 0.22);
  --shadow-panel: inset 8px 0 14px -10px rgba(17, 24, 39, 0.08);

  /* ---- Motion --------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast:      120ms;
  --dur-base:      180ms;
}