/* ===========================================================================
   Nextside Performance — Design Tokens (Apple Design System)
   Padrão (:root) = Apple Light moderno
   [data-theme="dark"] = Apple Dark sofisticado
   =========================================================================== */
:root {
  /* Cores de base — Apple Light */
  --bg: #f5f5f7;
  --bg-surface: #ffffff;
  --bg-elevated: #fafafc;
  --fg: #1d1d1f;
  --fg-muted: #424245;
  --fg-soft: #86868b;
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.14);
  --border-hair: rgba(0, 0, 0, 0.04);
  --card-bg: #ffffff;

  /* Accent Apple Blue */
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --accent-contrast: #ffffff;
  --accent-text: #0071e3;
  --link: #0071e3;
  --link-hover: #0077ed;

  /* Efeitos e superfícies auxiliares */
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 6px 20px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.06);
  --selection-bg: rgba(0, 113, 227, 0.16);
  --code-bg: #fafafc;
  --header-bg: rgba(255, 255, 255, 0.80);
  --header-border: rgba(0, 0, 0, 0.06);

  /* Gradientes refinados Apple */
  --grad-brand: linear-gradient(135deg, #0071e3 0%, #5856d6 100%);
  --grad-cta: linear-gradient(135deg, #1d1d1f 0%, #161617 60%, #000000 100%);

  /* Tipografia do sistema Apple & Inter/Geist */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro", "Inter", "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Inter", "Geist", system-ui, sans-serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Inter", "Geist", system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Monaco, Consolas, monospace;

  /* Espaçamento e layout */
  --reading-width: 720px;
  --content-padding: 20px;
}

/* === LIGHT THEME (explícito via data-theme="light") === */
:root[data-theme="light"] {
  --bg: #f5f5f7;
  --bg-surface: #ffffff;
  --bg-elevated: #fafafc;
  --fg: #1d1d1f;
  --fg-muted: #424245;
  --fg-soft: #86868b;
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.14);
  --border-hair: rgba(0, 0, 0, 0.04);
  --card-bg: #ffffff;
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --accent-contrast: #ffffff;
  --accent-text: #0071e3;
  --link: #0071e3;
  --link-hover: #0077ed;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 6px 20px rgba(0, 0, 0, 0.04);
  --selection-bg: rgba(0, 113, 227, 0.16);
  --code-bg: #fafafc;
  --header-bg: rgba(255, 255, 255, 0.80);
  --header-border: rgba(0, 0, 0, 0.06);
  --grad-brand: linear-gradient(135deg, #0071e3 0%, #5856d6 100%);
  --grad-cta: linear-gradient(135deg, #1d1d1f 0%, #161617 60%, #000000 100%);
}

/* === DARK THEME (Apple Dark sofisticado) === */
:root[data-theme="dark"] {
  --bg: #161617;
  --bg-surface: #1d1d1f;
  --bg-elevated: #242426;
  --fg: #f5f5f7;
  --fg-muted: #86868b;
  --fg-soft: #6e6e73;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-hair: rgba(255, 255, 255, 0.04);
  --card-bg: #1d1d1f;
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --accent-contrast: #ffffff;
  --accent-text: #2997ff;
  --link: #2997ff;
  --link-hover: #64b5f6;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.5);
  --selection-bg: rgba(0, 113, 227, 0.30);
  --code-bg: #121213;
  --header-bg: rgba(22, 22, 23, 0.80);
  --header-border: rgba(255, 255, 255, 0.08);
  --grad-brand: linear-gradient(135deg, #2997ff 0%, #a29bfe 100%);
  --grad-cta: linear-gradient(135deg, #1d1d1f 0%, #121213 100%);
}

/* Baseline */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--selection-bg);
  color: var(--fg);
}

@media (max-width: 720px) {
  html, body {
    font-size: 16px;
    line-height: 1.65;
  }
}