/*
 * LL Mechanical — Brand Tokens
 * ============================================================
 * Single source of truth for the design system.
 * All command-center dashboards link to this file.
 *
 * USAGE in each HTML file:
 *   <link rel="stylesheet" href="_shared/tokens.css">
 *   Remove the inline :root { ... } block from <style> after adding this link.
 *
 * DO NOT duplicate these variables into individual files.
 * If you need to add a new token, add it here only.
 * ============================================================
 */

:root {
  /* ---- Brand Palette ---- */

  /* Midnight Slate — primary structural color */
  --slate:        #2C3E50;
  --slate-90:     #3D4F62;
  --slate-70:     #5A6878;
  --slate-50:     #8B95A3;
  --slate-30:     #B0B7C2;

  /* Architectural Copper — accent color */
  --copper:       #B87333;
  --copper-deep:  #9A5F26;
  --copper-soft:  rgba(184, 115, 51, 0.10);
  --copper-edge:  rgba(184, 115, 51, 0.28);
  --copper-glow:  rgba(184, 115, 51, 0.18);

  /* Warm Stone — backgrounds and surfaces */
  --stone:        #D1CCC0;
  --stone-light:  #EDE9E2;
  --stone-bg:     #F7F5F1;
  --stone-edge:   #E8E5DF;
  --white:        #FFFFFF;

  /* ---- Semantic Surface Tokens ---- */
  --bg-base:          var(--white);
  --bg-elevated:      var(--stone-bg);
  --bg-stone:         var(--stone-light);
  --bg-card:          var(--white);
  --bg-card-hover:    #FBF9F5;
  --bg-overlay:       rgba(44, 62, 80, 0.55);

  /* ---- Border Tokens ---- */
  --border:           var(--stone-edge);
  --border-strong:    var(--stone);
  --border-accent:    var(--copper-edge);

  /* ---- Text Tokens ---- */
  --text-primary:     var(--slate);
  --text-secondary:   var(--slate-70);
  --text-muted:       var(--slate-50);
  --text-dim:         var(--slate-30);
  --text-inverse:     var(--white);

  /* ---- Status Colors ---- */
  --success:          #1F7A4F;
  --success-bg:       rgba(31, 122, 79, 0.08);
  --warning:          #C99B45;
  --warning-bg:       rgba(201, 155, 69, 0.10);
  --danger:           #A93D33;
  --danger-bg:        rgba(169, 61, 51, 0.08);
  --info:             #2471A3;
  --info-bg:          rgba(44, 62, 80, 0.06);

  /* ---- Typography ---- */
  --font-display:     'Montserrat', system-ui, sans-serif;
  --font-body:        'Inter', -apple-system, sans-serif;
  --font-mono:        'JetBrains Mono', 'SF Mono', monospace;

  /* ---- Shape ---- */
  --radius-sm:        4px;
  --radius:           8px;
  --radius-lg:        14px;

  /* ---- Shadows ---- */
  --shadow-xs:        0 1px 2px rgba(44, 62, 80, 0.04);
  --shadow-sm:        0 1px 2px rgba(44, 62, 80, 0.04), 0 2px 6px rgba(44, 62, 80, 0.05);
  --shadow:           0 2px 4px rgba(44, 62, 80, 0.05), 0 8px 24px rgba(44, 62, 80, 0.08);
  --shadow-lg:        0 4px 6px rgba(44, 62, 80, 0.06), 0 20px 50px rgba(44, 62, 80, 0.14);

  /* ---- Motion ---- */
  --transition:       160ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Aliases for estimating-command.html ---- */
  /* estimating uses abbreviated names — these map them to canonical tokens */
  --slate2:           var(--slate-90);
  --copper-border:    var(--copper-edge);
  --warmStone:        var(--stone);
}