/* Fliped — Design Tokens */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,ital,wght@9..144,0,400;9..144,0,500;9..144,0,600;9..144,1,400&family=Inter:wght@400;500;600;700&family=Newsreader:opsz,ital,wght@6..72,0,400;6..72,1,400;6..72,0,500&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* — Light Theme (Paper / Editorial) — */
  --bg: #FDFCFA;
  --bg-subtle: #F7F5F0;
  --surface: #FFFFFF;
  --surface-2: #F3F1EC;
  --surface-3: #EDEBE6;
  --border: #E7E3D9;
  --border-strong: #D9D3C5;
  --text: #141413;
  --text-secondary: #6E6E6B;
  --text-tertiary: #9A9A97;
  --text-inverse: #FDFCFA;

  --accent: #141413;
  --accent-hover: #2A2A28;
  --accent-text: #FFFFFF;

  --accent-warm: #C07A3A;
  --accent-warm-hover: #A8682E;

  --success: #2E7D32;
  --success-bg: #E8F5E9;
  --warning: #B7791F;
  --warning-bg: #FFF8E1;
  --danger: #B42318;
  --danger-bg: #FEE4E2;
  --info: #2E6B8A;
  --info-bg: #E8F2F7;

  --overlay: rgba(20, 20, 19, 0.5);
  --shadow-sm: 0 1px 2px rgba(20,20,19,0.05);
  --shadow: 0 4px 16px rgba(20,20,19,0.06);
  --shadow-lg: 0 12px 32px rgba(20,20,19,0.10);
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-full: 9999px;

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'Fraunces', 'Newsreader', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: -0.01em;

  /* Layout */
  --content-max: 1200px;
  --reader-max-narrow: 680px;
  --reader-max-medium: 760px;
  --reader-max-wide: 880px;
  --header-h: 56px;
  --sidebar-w: 240px;
}

/* — Dark Theme — Low contrast, eye comfortable — */
[data-theme="dark"] {
  --bg: #121214;
  --bg-subtle: #19191B;
  --surface: #1E1E20;
  --surface-2: #252529;
  --surface-3: #2C2C30;
  --border: #2A2A2E;
  --border-strong: #34343A;
  --text: #EDEDE8;
  --text-secondary: #9F9FA3;
  --text-tertiary: #6F6F74;
  --text-inverse: #121214;

  --accent: #EDEDE8;
  --accent-hover: #FFFFFF;
  --accent-text: #121214;

  --accent-warm: #D99A5B;
  --accent-warm-hover: #E8AB6E;

  --success: #6AAA64;
  --success-bg: #1B2A1D;
  --warning: #D9A441;
  --warning-bg: #2A2210;
  --danger: #E07A74;
  --danger-bg: #2A1B18;
  --info: #6BA3C2;
  --info-bg: #151E23;

  --overlay: rgba(0,0,0,0.6);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow: 0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121214;
    --bg-subtle: #19191B;
    --surface: #1E1E20;
    --surface-2: #252529;
    --surface-3: #2C2C30;
    --border: #2A2A2E;
    --border-strong: #34343A;
    --text: #EDEDE8;
    --text-secondary: #9F9FA3;
    --text-tertiary: #6F6F74;
  }
}