/* ============================================================
   Meshage — Color tokens
   "Polished Off-Grid." True-black base, dark slate surfaces,
   periwinkle primary + deep-violet secondary (Tweaks defaults).
   ============================================================ */
:root {
  /* ---- Base neutrals (dark-mode native) ---- */
  --black: #000000;          /* true black — app void / OLED base */
  --slate-950: #07090D;      /* app background */
  --slate-900: #0C1016;      /* base surface */
  --slate-850: #11161F;      /* raised surface / cards */
  --slate-800: #161D28;      /* elevated / sheets */
  --slate-700: #1E2733;      /* hover surface */
  --slate-600: #2A3441;      /* borders, dividers (strong) */
  --slate-500: #3A4654;      /* borders (subtle on raised) */
  --slate-400: #5A6675;      /* disabled fg, faint icons */
  --slate-300: #8A93A3;      /* muted text / captions */
  --slate-200: #B8C0CC;      /* secondary text */
  --slate-100: #DCE2EA;      /* primary text */
  --slate-050: #F2F5F9;      /* high-emphasis / on-accent dark */
  --white: #FFFFFF;

  /* ---- Primary accent — matches Tweaks "Primary" default ---- */
  --primary-glow: color-mix(in oklab, #D2BE74 70%, white);   /* glow / focus ring tint */
  --primary-400:  #D2BE74;      /* primary accent (active state, links) */
  --primary-500:  color-mix(in oklab, #D2BE74 85%, black);   /* pressed / hover-darker */
  --primary-600:  color-mix(in oklab, #D2BE74 62%, black);   /* deep, borders on fills */
  --primary-dim:  color-mix(in oklab, #D2BE74 15%, #07090D); /* tinted surface wash */

  /* ---- Secondary accent — matches Tweaks "Accent" default ---- */
  --accent-glow: color-mix(in oklab, #ECDEAC 70%, white);
  --accent-400:  #ECDEAC;    /* secondary accent */
  --accent-500:  color-mix(in oklab, #ECDEAC 85%, black);
  --accent-600:  color-mix(in oklab, #ECDEAC 62%, black);
  --accent-dim:  color-mix(in oklab, #ECDEAC 15%, #07090D); /* tinted surface wash */

  /* ---- Pop accent (placeholder value — TBD) — matches Tweaks "Pop" default ---- */
  --pop-glow: color-mix(in oklab, #FFC800 70%, white);
  --pop-400:  #FFC800;      /* third theme accent */
  --pop-500:  color-mix(in oklab, #FFC800 85%, black);
  --pop-600:  color-mix(in oklab, #FFC800 62%, black);
  --pop-dim:  color-mix(in oklab, #FFC800 15%, #07090D);

  /* ---- Semantic signal colors ---- */
  --signal-online:  #FFB23E; /* connected / active on mesh */
  --signal-relay:   #FFB23E; /* relaying / weak hop (amber) */
  --signal-offline: #5A6675; /* offline / no route (gray) */
  --success-400: #34E5A0;
  --success-dim: #0C2920;
  --warn-400:    #FFB23E;
  --warn-dim:    #2A2008;
  --danger-400:  #FF5C6A;
  --danger-500:  #E63E4D;
  --danger-dim:  #2C1014;

  /* ---- Network identity colors (multi-protocol) ----
     Each mesh network gets a distinct hue, deliberately NOT the primary
     accent (reserved for active/connected) or the semantic signal colors.
     [Our interpretation — adjust to match official network branding.] */
  --net-reticulum:  #7A80D6;   /* Reticulum / LXMF (rn) — blue */
  --net-meshcore:   #A984C2;   /* MeshCore (mc) — violet */
  --net-meshtastic: #5FF771;   /* Meshtastic (mt) — green */
  --net-reticulum-dim:  color-mix(in oklab, #7A80D6 16%, #07090D);
  --net-meshcore-dim:   color-mix(in oklab, #A984C2 16%, #07090D);
  --net-meshtastic-dim: color-mix(in oklab, #5FF771 16%, #07090D);
  --net-meshcore-inv:   #794F96;   /* opposite-mode MeshCore (dark shows the light value) */

  /* ---- Channel privacy tier colors (independent of network hues) ----
     open = neutral gray · public = amber · discoverable = sky · private = green */
  --chan-open:         #FFC2C2;
  --chan-public:       #FFBB5C;
  --chan-discoverable: #FBE579;
  --chan-private:      #8FC5FF;
  --chan-open-dim:         color-mix(in oklab, #FFC2C2 15%, #07090D);
  --chan-public-dim:       color-mix(in oklab, #FFBB5C 15%, #07090D);
  --chan-discoverable-dim: color-mix(in oklab, #FBE579 15%, #07090D);
  --chan-private-dim:      color-mix(in oklab, #8FC5FF 15%, #07090D);

  /* ============================================================
     SEMANTIC ALIASES — reach for these in product code
     ============================================================ */
  /* Surfaces */
  --bg-app:        var(--slate-950);
  --bg-base:       var(--slate-900);
  --surface-card:  var(--slate-850);
  --surface-raised:var(--slate-800);
  --surface-hover: var(--slate-700);
  --surface-sunken:var(--black);

  /* Text */
  --text-strong:   var(--slate-050);
  --text-body:     var(--slate-100);
  --text-secondary:var(--slate-200);
  --text-muted:    var(--slate-300);
  --text-faint:    var(--slate-400);
  --text-on-accent:var(--slate-950);  /* dark text on primary fills */

  /* Accents */
  --accent:        var(--primary-400);
  --accent-press:  var(--primary-500);
  --accent-deep:   var(--primary-600);
  --accent-2:      var(--accent-400);
  --accent-2-press:var(--accent-500);

  /* Lines */
  --border-subtle: var(--slate-600);
  --border-strong: var(--slate-500);
  --divider:       #FFFFFF14;   /* 8% white hairline */
  --bg-chrome:     rgba(12,16,22,0.85);  /* translucent nav / header chrome */

  /* Focus / glow */
  --focus-ring:    color-mix(in oklab, var(--primary-400) 55%, transparent);
}

/* ============================================================
   LIGHT MODE — flips the neutral ramp + a few semantics. Accent /
   network / channel hues are set live by Tweaks (per-mode columns).
   ============================================================ */
:root[data-theme="light"] {
  --black:      #FFFFFF;
  --slate-950:  #EAEEF4;   /* app background */
  --slate-900:  #F1F4F9;   /* base surface */
  --slate-850:  #FFFFFF;   /* raised surface / cards */
  --slate-800:  #F7F9FC;   /* elevated / sheets */
  --slate-700:  #E6EAF1;   /* hover surface */
  --slate-600:  #D6DCE6;   /* border subtle */
  --slate-500:  #C3CBD8;   /* border strong (darker → more visible) */
  --slate-400:  #95A0B0;   /* faint fg */
  --slate-300:  #5C6675;   /* muted text */
  --slate-200:  #3C4653;   /* secondary text */
  --slate-100:  #232C39;   /* body text */
  --slate-050:  #111823;   /* high-emphasis text */

  --surface-sunken: #E3E8F0;      /* fields sit below white cards */
  --text-on-accent: #111823;      /* dark text stays dark on light-accent fills */
  --net-meshcore-inv: #A984C2;    /* opposite-mode MeshCore (light shows the dark value) */
  --divider:        #0B14231F;    /* dark hairline */
  --bg-chrome:      rgba(240,243,248,0.85);

  /* Semantic "dim" washes — derive from the signal hue + light surface so
     tinted alert/status blocks stay readable in light mode. */
  --success-dim: color-mix(in oklab, var(--success-400) 14%, var(--surface-card));
  --warn-dim:    color-mix(in oklab, var(--warn-400) 16%, var(--surface-card));
  --danger-dim:  color-mix(in oklab, var(--danger-400) 14%, var(--surface-card));
}