/* Volga-Dnepr Messenger — unified aesthetic
   Pre-liquid-glass iOS 7–16 flat: hairline borders, SF-style type,
   subtle neutrals, VD navy as accent (replaces system blue).
   Full light + dark theming via [data-theme] attribute.
*/

/* ============ THEME TOKENS ============ */
:root[data-theme="light"] {
  --t-bg:            #F2F2F7;      /* iOS grouped bg */
  --t-bg-elev:       #FFFFFF;      /* card / bubble */
  --t-bg-sub:        #EFEFF4;
  --t-bg-chrome:     #F7F7F8;      /* nav + tab bars */
  --t-bg-inset:      #E5E5EA;      /* search field */
  --t-bg-press:      rgba(0,0,0,.06);

  --t-fg:            #000000;
  --t-fg-secondary:  #3C3C43;
  --t-fg-tertiary:   rgba(60,60,67,.6);
  --t-fg-quaternary: rgba(60,60,67,.3);

  --t-hairline:      rgba(60,60,67,.18);   /* iOS separator */
  --t-hairline-soft: rgba(60,60,67,.12);

  --t-accent:        #0B3D91;      /* VD navy replaces iOS blue */
  --t-accent-soft:   #E3ECFA;
  --t-accent-on:     #FFFFFF;
  --t-accent-fg:     #0B3D91;

  --t-bubble-them:   #E9E9EB;
  --t-bubble-them-fg:#000000;
  --t-bubble-me:     #0B3D91;
  --t-bubble-me-fg:  #FFFFFF;

  --t-danger:        #FF3B30;
  --t-warn:          #FF9500;
  --t-ok:            #34C759;

  --t-shadow: 0 1px 3px rgba(0,0,0,.08), 0 0 0 .5px rgba(0,0,0,.04);
  --t-shadow-lg: 0 8px 30px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.06);

  --t-runway-bg: #0B3D91;
  --t-runway-fg: #FFFFFF;
}

:root[data-theme="dark"] {
  --t-bg:            #000000;
  --t-bg-elev:       #1C1C1E;
  --t-bg-sub:        #2C2C2E;
  --t-bg-chrome:     #1C1C1E;
  --t-bg-inset:      #1C1C1E;
  --t-bg-press:      rgba(255,255,255,.08);

  --t-fg:            #FFFFFF;
  --t-fg-secondary:  #EBEBF5;
  --t-fg-tertiary:   rgba(235,235,245,.6);
  --t-fg-quaternary: rgba(235,235,245,.3);

  --t-hairline:      rgba(84,84,88,.65);
  --t-hairline-soft: rgba(84,84,88,.4);

  --t-accent:        #4F83D6;                 /* lighter VD navy */
  --t-accent-soft:   rgba(79,131,214,.18);
  --t-accent-on:     #FFFFFF;
  --t-accent-fg:     #4F83D6;

  --t-bubble-them:   #262629;
  --t-bubble-them-fg:#FFFFFF;
  --t-bubble-me:     #0B3D91;
  --t-bubble-me-fg:  #FFFFFF;

  --t-danger:        #FF453A;
  --t-warn:          #FF9F0A;
  --t-ok:            #30D158;

  --t-shadow: 0 1px 3px rgba(0,0,0,.6), 0 0 0 .5px rgba(255,255,255,.06);
  --t-shadow-lg: 0 8px 30px rgba(0,0,0,.6), 0 0 0 .5px rgba(255,255,255,.08);

  --t-runway-bg: #0B3D91;
  --t-runway-fg: #FFFFFF;
}

/* default */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ============ RESET / GLOBAL ============ */
* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
body {
  background: var(--t-bg);
  color: var(--t-fg);
  font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
  font-size: 15px; line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
  overflow: hidden;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
input, textarea { font: inherit; color: inherit; background: none; border: none; outline: none; }

/* ============ HAIRLINE UTILITY ============ */
.hl-t { border-top: .5px solid var(--t-hairline); }
.hl-b { border-bottom: .5px solid var(--t-hairline); }

/* ============ SCROLLBAR (subtle) ============ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--t-hairline); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--t-fg-tertiary); }
::-webkit-scrollbar-track { background: transparent; }

/* Runway plate — brand lockup band */
.runway {
  background: var(--t-runway-bg); color: var(--t-runway-fg); position: relative;
}
.runway::before, .runway::after {
  content:""; position:absolute; left:0; right:0; height:.5px; background: rgba(255,255,255,.55);
}
.runway::before { top: 3px } .runway::after { bottom: 3px }

.wordmark {
  font-family: "PT Serif", Georgia, serif;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .7em;
}
.wordmark .med {
  width: 1.8em; height: 1.8em; border-radius: 50%;
  border: 1.5px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .78em;
}

/* Classification chip */
.clschip {
  display: inline-flex; align-items: center;
  padding: 1px 5px; border-radius: 3px;
  font-size: 9px; font-weight: 700; letter-spacing: .12em;
  color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.clschip.pub { background: #2EA05C }
.clschip.int { background: #2E66C2 }
.clschip.con { background: #E88A2C }
.clschip.sec { background: #B3261E }

/* Mono for metadata */
.mono { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-variant-numeric: tabular-nums; }