/* Lanka Hit News — shared tokens (MSN-inspired Segoe UI + themes) */
:root {
  --navy: #0b1424;
  --navy2: #060d18;
  --ink: #0b1424;
  --red: #e30613;
  --red-deep: #b5040f;
  --blue: #0078d4;
  --green: #0d7a4f;
  --orange: #ea580c;
  --pink: #e11d48;
  --yellow: #f5c518;
  /* Red → gold accent under header / above footer */
  --brand-line-accent: #c5a46d;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --max: none;
  --page-gutter: 3.5vw;
  --font-display: "Segoe UI", SegoeUI, "Segoe UI Web (West European)", Figtree, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-ui: "Segoe UI", SegoeUI, "Segoe UI Web (West European)", Figtree, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 72px;

  /* Light theme surfaces */
  --bg: #f3f3f3;
  --bg-mid: #ffffff;
  --card: #ffffff;
  --text: #1b1b1b;
  --muted: #5c5c5c;
  --line: #e0e0e0;
  --soft-red: #fff1f2;
  --soft-blue: #eff6fc;
  --surface: #ffffff;
  --surface-2: #f5f5f5;
  --chrome: #1b1b1b;
  --chrome-text: #f3f3f3;
  --chrome-muted: #c8c8c8;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.12);
  /* Solid brand navy for .navy buttons — keeps contrast in dark theme */
  --btn-navy: #0b1424;
  /* Shared breaking ticker pace (overridden by JS for constant px/s) */
  --breaking-marquee-duration: 120s;
}
html[data-theme="dark"] {
  --bg: #141414;
  --bg-mid: #1b1b1b;
  --card: #242424;
  --text: #f3f3f3;
  --muted: #a0a0a0;
  --line: #333333;
  --soft-red: rgba(227, 6, 19, 0.16);
  --soft-blue: rgba(0, 120, 212, 0.14);
  --surface: #1f1f1f;
  --surface-2: #2a2a2a;
  --chrome: #0f0f0f;
  --chrome-text: #f3f3f3;
  --chrome-muted: #a8a8a8;
  --navy: #f3f3f3;
  --navy2: #0f0f0f;
  --ink: #f3f3f3;
  --shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 22px 50px rgba(0, 0, 0, 0.45);
}

html[data-theme="light"] {
  --bg: #f3f3f3;
  --bg-mid: #ffffff;
  --card: #ffffff;
  --text: #1b1b1b;
  --muted: #5c5c5c;
  --line: #e0e0e0;
  --soft-red: #fff1f2;
  --soft-blue: #eff6fc;
  --surface: #ffffff;
  --surface-2: #f5f5f5;
  --chrome: #1b1b1b;
  --chrome-text: #f3f3f3;
  --chrome-muted: #c8c8c8;
  --navy: #0b1424;
  --navy2: #060d18;
  --ink: #0b1424;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.12);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --bg: #141414;
    --bg-mid: #1b1b1b;
    --card: #242424;
    --text: #f3f3f3;
    --muted: #a0a0a0;
    --line: #333333;
    --soft-red: rgba(227, 6, 19, 0.16);
    --soft-blue: rgba(0, 120, 212, 0.14);
    --surface: #1f1f1f;
    --surface-2: #2a2a2a;
    --chrome: #0f0f0f;
    --chrome-text: #f3f3f3;
    --chrome-muted: #a8a8a8;
    --navy: #f3f3f3;
    --navy2: #0f0f0f;
    --ink: #f3f3f3;
    --shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 22px 50px rgba(0, 0, 0, 0.45);
  }
}

@media (prefers-color-scheme: light) {
  html[data-theme="system"] {
    --bg: #f3f3f3;
    --bg-mid: #ffffff;
    --card: #ffffff;
    --text: #1b1b1b;
    --muted: #5c5c5c;
    --line: #e0e0e0;
    --soft-red: #fff1f2;
    --soft-blue: #eff6fc;
    --surface: #ffffff;
    --surface-2: #f5f5f5;
    --chrome: #1b1b1b;
    --chrome-text: #f3f3f3;
    --chrome-muted: #c8c8c8;
    --navy: #0b1424;
    --navy2: #060d18;
    --ink: #0b1424;
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.12);
  }
}

@keyframes lhn-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes lhn-underline {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes lhn-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes lhn-live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45); }
  50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
}

/* Site-wide: same font family as homepage */
html,
body {
  font-family: var(--font-ui);
}

h1,
h2,
h3,
h4,
h5,
h6,
.brand,
.tagline,
.article-title,
.media-detail-title,
.news-page-head h1,
.hero-slide h1,
.hero-slide h1 a,
.footer,
.footer h4,
.nav,
.msn-chrome,
button,
input,
select,
textarea {
  font-family: var(--font-ui);
}