/* ============================================================
   global.css — Design tokens, reset, typography
   Apple News x The Economist — Dark + Light theme system
   ============================================================ */

@font-face {
  font-family: "Economist101";
  src: url("../Economist101.otf") format("opentype");
}

:root {
  /* Background */
  --bg-primary: #000000;
  --bg-secondary: #0a0a0a;
  --bg-card: #111111;
  --bg-card-hover: #1a1a1a;
  --bg-elevated: #1c1c1e;

  /* Text */
  --text-primary: #ffffff;
  --text-secondary: #aaaaaa;
  --text-tertiary: #666666;
  --text-muted: #555555;

  /* Article body text */
  --article-body: #d0d0d0;

  /* Accent */
  --accent-red: #e3120b;
  --accent-blue: #0a84ff;

  /* Border */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-card: rgba(255, 255, 255, 0.06);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  /* Shadows */
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.4), 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-card-hover: 0 8px 36px rgba(0, 0, 0, 0.6), 0 0 1px rgba(255, 255, 255, 0.08);

  /* Transitions */
  --transition-fast: 180ms ease-out;
  --transition-base: 220ms ease-out;

  /* Typography */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", sans-serif;
  --font-display: "Economist101", Georgia, "Times New Roman", serif;
  --font-body: Georgia, "Times New Roman", serif;

  /* Reading */
  --max-width-reading: 780px;
  --max-width-site: 1280px;

  /* Card grid */
  --card-min-width: 220px;

  /* Navigation — Apple-style */
  --nav-height: 48px;
  --nav-bg: rgba(22, 22, 23, 0.82);
  --nav-panel-bg: #1d1d1f;
  --nav-border: rgba(255, 255, 255, 0.08);
  --nav-panel-border: rgba(255, 255, 255, 0.1);
  --nav-panel-shadow: 0 4px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --nav-blur: saturate(180%) blur(24px);
  --nav-overlay-bg: rgba(0, 0, 0, 0.48);
  --nav-overlay-blur: blur(14px);
  --nav-column-title: #86868b;
  --nav-link-color: #d0d0d2;
  --nav-link-hover: #ffffff;
  --nav-chevron-color: #86868b;
  --nav-search-color: #d0d0d2;
  --nav-search-bg: rgba(128, 128, 128, 0.14);
  --nav-animation-curve: cubic-bezier(0.32, 0.08, 0.24, 1);
  --nav-panel-duration: 320ms;
}

/* ============================================================
   Light Mode — auto-switch via system preference
   ============================================================ */

@media (prefers-color-scheme: light) {
  :root {
    --bg-primary: #f5f5f7;
    --bg-secondary: #e8e8ed;
    --bg-card: #ffffff;
    --bg-card-hover: #f0f0f0;
    --bg-elevated: #ffffff;

    --text-primary: #1d1d1f;
    --text-secondary: #6e6e73;
    --text-tertiary: #86868b;
    --text-muted: #aeaeb2;

    --article-body: #3a3a3c;

    --border-subtle: rgba(0, 0, 0, 0.08);
    --border-card: rgba(0, 0, 0, 0.06);

    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.04);
    --shadow-card-hover: 0 8px 36px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.06);

    --nav-bg: rgba(251, 251, 253, 0.82);
    --nav-panel-bg: #f5f5f7;
    --nav-border: rgba(0, 0, 0, 0.08);
    --nav-panel-border: rgba(0, 0, 0, 0.1);
    --nav-panel-shadow: 0 4px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);
    --nav-overlay-bg: rgba(0, 0, 0, 0.24);
    --nav-overlay-blur: blur(14px);
    --nav-column-title: #86868b;
    --nav-link-color: #3a3a3c;
    --nav-link-hover: #1d1d1f;
    --nav-chevron-color: #86868b;
    --nav-search-color: #3a3a3c;
    --nav-search-bg: rgba(128, 128, 128, 0.1);
  }

  ::selection {
    background: rgba(0, 0, 0, 0.1);
  }
}

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-ui);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100vh;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.15;
}

::selection {
  background: rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
}

/* Economist end-of-article marker */
.span_ufinish {
  color: var(--accent-red);
}