/* ============================================================
   MONTEITH CONSTRUCTION — COLOR TOKENS
   A disciplined black / white / red system. Red is structural,
   never decorative: it marks the brand, the primary action, and
   the single most important number on a page. Everything else is
   ink on paper.
   ============================================================ */

:root {
  /* --- Brand red (sampled from the logo: rgb(216,32,41)) --- */
  --red-500: #D82029;   /* primary brand red — the logo, the CTA */
  --red-web: #D6001C;   /* the slightly hotter red used on monteithco.com */
  --red-600: #BC1A22;   /* hover */
  --red-700: #9E141B;   /* pressed / deep */
  --red-400: #E4474F;   /* lifted, on dark */
  --red-300: #F08A8F;   /* tint */
  --red-100: #FBDDDE;   /* wash / selection */
  --red-050: #FDF0F0;   /* faintest surface tint */

  /* --- Ink (neutral, very slightly cool — concrete & steel) --- */
  --ink-900: #121316;   /* near-black — primary text, dark sections */
  --ink-800: #1B1D21;   /* dark surface */
  --ink-700: #2A2D33;   /* raised dark surface */
  --ink-600: #474B53;   /* muted text on light / borders on dark */
  --ink-500: #6A6F78;   /* secondary text */
  --ink-400: #969BA4;   /* tertiary / placeholder */
  --ink-300: #C3C7CD;   /* hairlines on light, disabled text */
  --ink-200: #E1E3E7;   /* borders, dividers */
  --ink-150: #ECEEF0;   /* subtle fills */
  --ink-100: #F3F4F6;   /* app background */
  --ink-050: #F9FAFB;   /* card / panel on app bg */
  --white:   #FFFFFF;

  /* --- Functional (used sparingly; this brand barely needs them) --- */
  --ok-500:   #2E7D46;
  --warn-500: #C9831A;
  --info-500: #2C6FB0;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components, not the raw scale
     ============================================================ */

  /* Brand */
  --brand:           var(--red-500);
  --brand-hover:     var(--red-600);
  --brand-pressed:   var(--red-700);
  --brand-on-dark:   var(--red-400);
  --brand-wash:      var(--red-050);

  /* Surfaces (light (default) context) */
  --surface-page:    var(--ink-100);
  --surface-card:    var(--white);
  --surface-sunken:  var(--ink-050);
  --surface-inverse: var(--ink-900);

  /* Text */
  --text-strong:     var(--ink-900);
  --text-body:       var(--ink-700);
  --text-muted:      var(--ink-500);
  --text-faint:      var(--ink-400);
  --text-on-brand:   var(--white);
  --text-on-dark:    var(--white);
  --text-on-dark-muted: rgba(255,255,255,0.62);

  /* Lines */
  --border-strong:   var(--ink-300);
  --border:          var(--ink-200);
  --border-subtle:   var(--ink-150);
  --border-on-dark:  rgba(255,255,255,0.14);

  /* Focus */
  --focus-ring:      var(--red-500);
}