/* ============================================================================
   CafeSync — Design System: global.css (the defining file)
   Root definitions, design tokens, reset and base element styles.
   Every token here feeds layout.css and styles.css below it.
   ============================================================================ */

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

:root {
  /* Palette */
  --bg: #f7f3ec;
  --bg-deep: #efe7d9;
  --surface: #ffffff;
  --ink: #2c241b;
  --ink-soft: #5f554a;
  --ink-faint: #8c8174;
  --line: #e6dccd;
  --line-strong: #d6c9b6;

  --primary: #a03f1e;
  --primary-hover: #84321a;
  --primary-active: #6d2913;
  --primary-soft: #f8e9e0;
  --primary-ink: #722c13;

  --success: #1e7d3f;
  --success-soft: #e4f3e9;
  --warning: #a16207;
  --warning-soft: #fdf3d8;
  --danger: #b3261e;
  --danger-soft: #fdecea;
  --info: #1f5f8c;
  --info-soft: #e9f1f8;

  --focus: rgba(160, 63, 30, 0.35);

  /* Geometry */
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(44, 36, 27, 0.05), 0 1px 3px rgba(44, 36, 27, 0.07);
  --shadow-md: 0 10px 32px -14px rgba(44, 36, 27, 0.22);
  --shadow-lg: 0 28px 64px -24px rgba(44, 36, 27, 0.32);

  /* Topbar (sticky header surface) */
  --topbar-bg: rgba(255, 255, 255, 0.72);

  /* Rhythm */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

/* ----------------------------------------------------------------------------
   Dark theme (Task 7.8) — flipped design tokens, applied via the early-init
   script in base.html so the persisted `cafesync_theme` (or the OS
   prefers-color-scheme) is active before first paint.
   ---------------------------------------------------------------------------- */
[data-theme="dark"] {
  --bg: #17130f;
  --bg-deep: #201a13;
  --surface: #241d16;
  --ink: #f1eadf;
  --ink-soft: #c9bfae;
  --ink-faint: #948978;
  --line: #3b3326;
  --line-strong: #4d4231;

  --primary: #d96b45;
  --primary-hover: #e07a54;
  --primary-active: #c05935;
  --primary-soft: #3b251a;
  --primary-ink: #f4c1a8;

  --success: #55b277;
  --success-soft: #1d3324;
  --warning: #d9a13b;
  --warning-soft: #362d16;
  --danger: #e06a62;
  --danger-soft: #3a1f1c;
  --info: #74acd2;
  --info-soft: #1c2b37;

  --focus: rgba(217, 107, 69, 0.45);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 32px -14px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 28px 64px -24px rgba(0, 0, 0, 0.6);

  --topbar-bg: rgba(28, 22, 16, 0.82);

  color-scheme: dark;
}

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(160, 63, 30, 0.08), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(31, 95, 140, 0.06), transparent 55%),
    var(--bg);
  color: var(--ink);
  line-height: 1.55;
  min-height: 100vh;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--primary); }
a:hover { color: var(--primary-hover); }

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}