/* ============================================================
   Fittra — AI assistant workspace
   Design tokens + base styles
   High-end London property renovation brand language:
   neutral stone palette · charcoal ink · uppercase tracked labels
   ============================================================ */

:root {
  /* type */
  --font-ui: "Hanken Grotesk", system-ui, sans-serif;
  --font-display: "Archivo", system-ui, sans-serif;
  --font-mono: "Hanken Grotesk", ui-monospace, monospace; /* tabular via .mono */

  /* spacing rhythm */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* density (driven by tweak) */
  --pad-card: 18px;
  --gap-lane: 14px;

  /* ---- light theme (stone neutrals) ---- */
  --bg: oklch(0.945 0.0015 95);
  --bg-grad: oklch(0.965 0.002 95);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.975 0.0015 95);
  --surface-3: oklch(0.93 0.002 95);
  --ink: oklch(0.235 0.004 75);
  --ink-2: oklch(0.44 0.004 75);
  --ink-3: oklch(0.605 0.004 80);
  --line: oklch(0.892 0.002 90);
  --line-2: oklch(0.845 0.003 90);

  --accent: oklch(0.55 0.05 60);
  --accent-ink: oklch(0.43 0.05 55);
  --accent-soft: oklch(0.95 0.02 70);
  --accent-contrast: oklch(0.99 0.005 80);

  --urgent: oklch(0.55 0.15 28);
  --urgent-soft: oklch(0.95 0.035 30);
  --warn: oklch(0.64 0.1 70);
  --warn-soft: oklch(0.95 0.04 78);
  --calm: oklch(0.53 0.07 150);
  --calm-soft: oklch(0.95 0.03 150);

  /* source brand-ish hues (muted to fit) */
  --src-gmail: oklch(0.6 0.15 28);
  --src-calendar: oklch(0.56 0.11 250);
  --src-whatsapp: oklch(0.62 0.13 150);
  --src-telegram: oklch(0.62 0.12 240);

  --shadow-sm: 0 1px 2px oklch(0.35 0.01 80 / 0.06), 0 1px 1px oklch(0.35 0.01 80 / 0.04);
  --shadow-md: 0 4px 14px oklch(0.35 0.01 80 / 0.08), 0 1px 3px oklch(0.35 0.01 80 / 0.05);
  --shadow-lg: 0 18px 48px oklch(0.3 0.01 80 / 0.16), 0 4px 12px oklch(0.3 0.01 80 / 0.08);
}

[data-theme="dark"] {
  --bg: oklch(0.205 0.003 90);
  --bg-grad: oklch(0.235 0.004 90);
  --surface: oklch(0.25 0.004 90);
  --surface-2: oklch(0.285 0.004 90);
  --surface-3: oklch(0.32 0.005 90);
  --ink: oklch(0.95 0.003 90);
  --ink-2: oklch(0.76 0.004 90);
  --ink-3: oklch(0.58 0.005 90);
  --line: oklch(0.34 0.005 90);
  --line-2: oklch(0.4 0.006 90);

  --accent: oklch(0.7 0.06 65);
  --accent-ink: oklch(0.8 0.05 70);
  --accent-soft: oklch(0.33 0.03 65);
  --accent-contrast: oklch(0.16 0.01 80);

  --urgent: oklch(0.68 0.14 28);
  --urgent-soft: oklch(0.33 0.07 30);
  --warn: oklch(0.76 0.1 72);
  --warn-soft: oklch(0.33 0.05 72);
  --calm: oklch(0.68 0.09 150);
  --calm-soft: oklch(0.31 0.045 150);

  --src-gmail: oklch(0.72 0.14 30);
  --src-calendar: oklch(0.71 0.11 250);
  --src-whatsapp: oklch(0.74 0.12 150);
  --src-telegram: oklch(0.74 0.11 240);

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
  --shadow-md: 0 6px 18px oklch(0 0 0 / 0.4);
  --shadow-lg: 0 22px 54px oklch(0 0 0 / 0.55);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 14.5px;
  line-height: 1.45;
}

#root { height: 100vh; }

::selection { background: var(--accent-soft); color: var(--accent-ink); }

/* scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; }

/* tabular figures + tracked-caps feel for metadata (brand pattern) */
.mono {
  font-family: var(--font-ui);
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.01em;
}

@keyframes flowIn {
  from { transform: translateY(10px); }
  to { transform: translateY(0); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}
@keyframes slideUp {
  from { transform: translateY(10px); }
  to { transform: translateY(0); }
}