/* ============================================================
   Grand Massif — Color System
   Two brand colors only: Terracotta (primary) + Slate (secondary),
   both sampled from the logomark. Deep Navy carries the
   "critical operations" atmosphere. Green is FUNCTIONAL ONLY
   (operational status) — never a brand/decoration color.
   ============================================================ */
:root {
  /* ---- Terracotta — PRIMARY brand (logo mark) ---- */
  --terracotta-700: #9E3418;
  --terracotta-600: #B23A1E;
  --terracotta-500: #C94829; /* brand base — sampled from logo */
  --terracotta-400: #DB6A4E;
  --terracotta-300: #E99B85;
  --terracotta-100: #F6E1D9;
  --terracotta-50:  #FBF0EB;

  /* ---- Slate — SECONDARY brand (logo wordmark) ---- */
  --slate-800: #2C3843;
  --slate-700: #3E4C58;
  --slate-600: #596977; /* brand base — sampled from logo */
  --slate-500: #74828E;
  --slate-400: #9AA6AF;
  --slate-300: #C0C8CE;
  --slate-200: #DCE1E5;
  --slate-100: #EDF0F2;

  /* ---- Navy — critical-operations atmosphere / dark surfaces ---- */
  --navy-950: #081120;
  --navy-900: #0B1B2E; /* deck cover background */
  --navy-800: #0E2033; /* primary dark surface */
  --navy-700: #16304A;
  --navy-600: #1F415F;
  --navy-500: #2C5476;

  /* ---- Neutrals — light surfaces + ink ---- */
  --white:  #FFFFFF;
  --paper:  #F5F7F8; /* light page background */
  --mist:   #EAEEF0;
  --ink-900:#0E2033;
  --ink-700:#28313A;
  --ink-500:#4C5661;

  /* ---- Functional status (NOT brand) ---- */
  --ok-500:    #1F9D57; /* operational / online — the only sanctioned green */
  --ok-100:    #DCEFE3;
  --warn-500:  #E0A020; /* attention */
  --warn-100:  #FBEFD3;
  --alert-500: #C4342A; /* critical / fault */
  --alert-100: #F6DAD7;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components, not the ramp.
     Defaults below target LIGHT surfaces.
     ============================================================ */
  --color-bg:            var(--paper);
  --color-surface:       var(--white);
  --color-surface-2:     var(--slate-100);
  --color-surface-inset: var(--mist);

  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-500);
  --text-muted:     var(--slate-500);
  --text-inverse:   var(--white);
  --text-brand:     var(--terracotta-600);

  --brand:          var(--terracotta-500);
  --brand-hover:    var(--terracotta-600);
  --brand-active:   var(--terracotta-700);
  --brand-contrast: var(--white);
  --brand-tint:     var(--terracotta-50);

  --accent:         var(--slate-600);
  --accent-hover:   var(--slate-700);

  --border:         var(--slate-200);
  --border-strong:  var(--slate-300);
  --border-brand:   var(--terracotta-500);

  --focus-ring:     var(--terracotta-400);
  --overlay:        rgba(11, 27, 46, 0.55);

  --status-ok:    var(--ok-500);
  --status-warn:  var(--warn-500);
  --status-alert: var(--alert-500);
}

/* ============================================================
   DARK SCOPE — apply to any container that sits on Navy.
   Use [data-theme="dark"] or the .gm-dark class.
   ============================================================ */
[data-theme="dark"], .gm-dark {
  --color-bg:            var(--navy-900);
  --color-surface:       var(--navy-800);
  --color-surface-2:     var(--navy-700);
  --color-surface-inset: var(--navy-950);

  --text-primary:   var(--white);
  --text-secondary: var(--slate-300);
  --text-muted:     var(--slate-400);
  --text-inverse:   var(--ink-900);
  --text-brand:     var(--terracotta-400);

  --brand:          var(--terracotta-500);
  --brand-hover:    var(--terracotta-400);
  --brand-active:   var(--terracotta-300);
  --brand-contrast: var(--white);
  --brand-tint:     rgba(201, 72, 41, 0.16);

  --accent:         var(--slate-400);
  --accent-hover:   var(--slate-300);

  --border:         rgba(255, 255, 255, 0.12);
  --border-strong:  rgba(255, 255, 255, 0.22);
  --border-brand:   var(--terracotta-500);

  --focus-ring:     var(--terracotta-400);
  --overlay:        rgba(8, 17, 32, 0.7);
}