/* ==========================================================================
   R2Art Design System — Natural Earth Color Tokens & Typography
   Theme: Didact Gothic Sans-Serif + JetBrains Mono Code Editor
   ========================================================================== */

:root {
  /* Natural Earth Base Palette (Light Mode) */
  --bg-app: #F6F3EE;
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #FAF8F5;
  --bg-surface-alt: #EFECE6;
  --bg-surface-hover: #E8E4DC;

  /* Borders */
  --border-subtle: #E2DDD5;
  --border-color: #D6CFBE;
  --border-strong: #BAAF99;

  /* Typography */
  --font-sans: 'Didact Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Menlo, Monaco, Consolas, monospace;

  /* Text Colors */
  --text-primary: #1C1A17;
  --text-secondary: #5E584E;
  --text-muted: #8E8678;
  --text-inverse: #FFFFFF;

  /* Signature R2Art Terracotta / Clay Primary */
  --primary-clay: #B85D37;
  --primary-clay-hover: #A04E2B;
  --primary-clay-light: #F4E8E1;
  --primary-clay-subtle: rgba(184, 93, 55, 0.08);

  /* Diff Semantic Colors */
  --diff-added-bg: #EAF4EE;
  --diff-added-border: #9FCFB0;
  --diff-added-text: #23653A;
  --diff-added-highlight: #CBE6D4;

  --diff-removed-bg: #FBEFEF;
  --diff-removed-border: #F0AFAF;
  --diff-removed-text: #A62828;
  --diff-removed-highlight: #F9CECE;

  --diff-modified-bg: #FEF7EA;
  --diff-modified-border: #F6D69E;
  --diff-modified-text: #A76508;
  --diff-modified-highlight: #FDE8BF;

  /* Neutral Status */
  --status-neutral: #8E8678;
  --accent-sage: #3F6E52;
  --accent-ochre: #C68233;

  /* Sizing & Spacing */
  --header-height: 52px;
  --toolbar-height: 44px;
  --statusbar-height: 28px;

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Elevation Shadows */
  --shadow-xs: 0 1px 2px rgba(28, 26, 23, 0.04);
  --shadow-sm: 0 2px 5px rgba(28, 26, 23, 0.06), 0 1px 2px rgba(28, 26, 23, 0.03);
  --shadow-md: 0 4px 12px rgba(28, 26, 23, 0.08), 0 2px 4px rgba(28, 26, 23, 0.04);
  --shadow-lg: 0 12px 24px -4px rgba(28, 26, 23, 0.12), 0 4px 8px -2px rgba(28, 26, 23, 0.05);

  /* Transitions */
  --transition-fast: 120ms ease;
  --transition-normal: 200ms ease;
}

[data-theme="dark"] {
  /* Natural Earth Dark Mode Tokens */
  --bg-app: #151412;
  --bg-surface: #1E1C18;
  --bg-surface-elevated: #26241F;
  --bg-surface-alt: #2D2A24;
  --bg-surface-hover: #36322B;

  --border-subtle: #2F2C26;
  --border-color: #3F3B33;
  --border-strong: #544F45;

  --text-primary: #EDE8DE;
  --text-secondary: #B6AE9E;
  --text-muted: #7E7667;
  --text-inverse: #151412;

  --primary-clay: #CC734B;
  --primary-clay-hover: #D8825C;
  --primary-clay-light: #342017;
  --primary-clay-subtle: rgba(204, 115, 75, 0.15);

  --diff-added-bg: #14281B;
  --diff-added-border: #234D31;
  --diff-added-text: #68CF8E;
  --diff-added-highlight: #1B3F27;

  --diff-removed-bg: #2B1516;
  --diff-removed-border: #522425;
  --diff-removed-text: #F2797B;
  --diff-removed-highlight: #461C1E;

  --diff-modified-bg: #2C2111;
  --diff-modified-border: #553E1B;
  --diff-modified-text: #F3B552;
  --diff-modified-highlight: #463314;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.5);
}