/* GeoCables — "Морская карта" skin (prototype overlay).
   Clothing over the working site: retokens --gc-*, retypes headings,
   turns cards into hairline chart panels. No markup/JS changes. */

/* ── 1. Palette retoken: deep ocean ink + hairlines + brass ── */
:root, [data-theme="dark"] {
  --gc-bg:#122031;
  --gc-bg-secondary:#1a2b3f;
  --gc-bg-card:#1c2e44;
  --gc-bg-input:#182940;
  --gc-bg-white:#1a2b3f;
  --gc-bg-subtle:#16273a;
  --gc-text:#eaf2fa;
  --gc-text-secondary:#b8cbde;
  --gc-text-muted:#8ba1ba;
  --gc-border:rgba(170,200,232,.22);
  --gc-border-strong:rgba(170,200,232,.42);
  --gc-accent:#74d4e8;
  --gc-accent-bg:rgba(116,212,232,.07);
  --gc-accent-border:rgba(116,212,232,.25);
  --gc-accent-glow:rgba(116,212,232,.18);
  --gc-blue:#74d4e8;
  --gc-green:#3fbf77; --gc-green-bg:rgba(63,191,119,.08);
  --gc-orange:#d9a520; --gc-red:#e05252;
  --gc-nav-bg:rgba(16,29,44,.94); --gc-nav-border:rgba(158,190,224,.22);
  --gc-footer-bg:#101c2b;
  --gc-radius:2px; --gc-radius-sm:2px;
  --gc-shadow:none; --gc-shadow-lg:none;
  --gc-brass:#c9a96e;
}

/* ── 2. Typography (HYBRID split): dashboards read strict (Inter, tight);
   editorial surfaces (articles, dossiers, methodology, cable names, home hero)
   keep the calm serif. Serif selectors win over the strict default by specificity. */
body { font-family:'Inter',-apple-system,'Segoe UI',sans-serif !important; }
h1, h2, h3 {
  font-family:'Inter',-apple-system,'Segoe UI',sans-serif !important;
  font-weight:600 !important; letter-spacing:-.01em !important;
}
.gc-blog-post h1, .gc-blog-post h2, .gc-blog-post h3,
.gc-blog-card__title, .gc-blog-card h2, .gc-blog-card h3,
.gc-page-title, .mth-wrap h1, .mth-wrap h2, .mth-wrap h3,
.gc-lz-cable-name, .gc-lv-name, h1[data-i18n] {
  font-family:'Lora',Georgia,serif !important;
  font-weight:500 !important; letter-spacing:0 !important;
}
h1[data-i18n] { font-size:clamp(1.7rem,3vw,2.05rem) !important; line-height:1.25 !important; }

/* section micro-labels: from SHOUTING-dot-caps to chart annotations */
[style*="text-transform:uppercase"][style*="letter-spacing"] {
  font-family:'Lora',Georgia,serif !important;
  font-style:italic !important;
  font-weight:500 !important;
  color:var(--gc-brass) !important;
  letter-spacing:.18em !important;
}

/* numbers read as instrument output */
[style*="font-variant-numeric"], .gc-lz-num, td[style*="tabular-nums"] {
  font-family:'IBM Plex Mono',monospace !important;
}

/* ── 3. Cards -> soft chart panels (rounded design language) ── */
div[style*="border-radius:10px"], div[style*="border-radius:12px"],
div[style*="border-radius: 10px"], div[style*="border-radius: 12px"] {
  border-radius:14px !important;
  background:rgba(26,43,63,.6) !important;
  border-color:var(--gc-border) !important;
  box-shadow:none !important;
}
/* pill chips -> quiet annotations (kept pill-shaped) */
a[style*="border-radius:16px"], span[style*="border-radius:16px"],
a[style*="border-radius:14px"], span[style*="border-radius:14px"],
a[style*="border-radius:20px"], span[style*="border-radius:20px"] {
  border-radius:999px !important;
  background:transparent !important;
  border-color:var(--gc-border) !important;
  font-family:'IBM Plex Mono',monospace !important;
  font-size:11.5px !important;
}

/* ── 4. Bathymetric contours behind everything ── */
body::before {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.3;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 900'><g fill='none' stroke='rgba(120,165,210,0.07)' stroke-width='1'><path d='M-60,220 C240,150 420,270 700,215 S1120,120 1460,205'/><path d='M-60,320 C260,240 460,370 740,305 S1150,215 1460,300'/><path d='M-60,430 C280,340 500,480 780,405 S1180,320 1460,405'/><path d='M-60,560 C300,455 540,610 820,520 S1210,435 1460,520'/><path d='M-60,700 C320,585 580,745 860,645 S1240,560 1460,645'/><path d='M-60,840 C340,720 620,880 900,775 S1270,690 1460,775'/></g><g fill='rgba(120,165,210,0.10)' font-family='Georgia' font-style='italic' font-size='11'><text x='180' y='190'>2417</text><text x='560' y='300'>3480</text><text x='940' y='250'>2980</text><text x='380' y='520'>4105</text><text x='1120' y='470'>3712</text><text x='760' y='690'>4890</text></g></svg>");
  background-size:cover;
}
body > * { position:relative; z-index:1; }

/* ── 5. Nav + hero polish ── */
.gc-nav { backdrop-filter:blur(6px); }
.gc-nav .gc-logo, .gc-nav a[href="/"] strong { font-family:'Lora',serif !important; letter-spacing:.14em !important; }

/* hero headline becomes the chart title */
.hero h1, h1[data-i18n] {
  letter-spacing:.01em !important;
}

/* traffic-light meter bars: calmer, thinner */
div[style*="linear-gradient(90deg"] { filter:saturate(.75) brightness(.95); }

/* buttons and links */
a { text-decoration-color:rgba(116,212,232,.4); }

/* ── 6. Spotlight fact badges + FAQ (chart voice) ── */
.gc-sp-fact { background:transparent !important; border-radius:999px !important; }
.gc-sp-fact b { font-family:'IBM Plex Mono',monospace !important; font-weight:500 !important; }
.gc-sp-fact i { font-family:'Lora',Georgia,serif !important; font-style:italic !important;
  text-transform:none !important; letter-spacing:.04em !important; color:var(--gc-brass) !important; font-size:.76rem !important; }
.gc-faq-q { font-family:'Lora',Georgia,serif !important; font-size:1.12rem !important; font-weight:500 !important; }

/* ── 7. Health-monitor pill: stable pill (hover re-serialization was flipping it) ── */
a.gc-health-pill, a.gc-health-pill:hover {
  border-radius:999px !important;
  background:var(--gc-green-bg,rgba(63,191,119,.08)) !important;  /* pin ALL props via class: the fragile [style*=radius] rule drops on hover re-serialization, flipping bg/radius/font. */
  border-color:rgba(63,191,119,.32) !important;
  font-family:'IBM Plex Mono',monospace !important;
  font-size:11.5px !important;
  transition:border-color .2s, background .2s !important;
}
a.gc-health-pill:hover { border-color:var(--gc-green,#3fbf77) !important; background:rgba(63,191,119,.15) !important; }

/* ── 8. TOKEN UNIFICATION (Step 1): the site has a SECOND variable system
   (--text-primary/--bg-*/--accent/--danger…) defined per-page (index, health,
   live, conflict…). The skin only retokened --gc-*; system B pages looked
   half-skinned ("salad"). Map system B to the same hybrid palette so the whole
   site reads from ONE set. !important on the custom props so the skin wins over
   each page's local :root regardless of source order. */
:root, [data-theme="dark"] {
  /* surfaces (3 levels) */
  --bg-primary:#122031 !important; --bg-secondary:#1a2b3f !important;
  --bg-card:#1c2e44 !important; --bg-card-hover:#223650 !important;
  --bg-input:#182940 !important;
  /* ink (3 levels) */
  --text-primary:#eaf2fa !important; --text-secondary:#b8cbde !important;
  --text-muted:#8ba1ba !important;
  /* structure */
  --border:rgba(170,200,232,.22) !important; --border-glow:rgba(116,212,232,.25) !important;
  --accent:#74d4e8 !important; --accent-glow:rgba(116,212,232,.18) !important;
  --blue:#74d4e8 !important; --blue-bg:rgba(116,212,232,.08) !important; --cyan:#74d4e8 !important;
  --purple:#9085e9 !important;
  /* status (semantic, evaluation not magnitude — Step 4 wires this to verdicts) */
  --success:#3fbf77 !important; --green:#3fbf77 !important;
  --green-bg:rgba(63,191,119,.10) !important; --green-border:rgba(63,191,119,.32) !important;
  --warning:#d9a520 !important; --yellow:#d9a520 !important;
  --yellow-bg:rgba(217,165,32,.10) !important; --yellow-border:rgba(217,165,32,.32) !important;
  --danger:#e05252 !important; --red:#e05252 !important;
  --red-bg:rgba(224,82,82,.10) !important; --red-border:rgba(224,82,82,.32) !important;
  /* map lines: cables muted by default (Step 5 class-3 hierarchy) */
  --cable-line:#6f86b8 !important; --straight-line:#6a7f9c !important;
}