/* ============================================================
   calm.css — the site's type and colour, loaded LAST on every page.

   Warm neutrals, one clay accent, a serif for headings and a plain sans for
   everything else. It redefines the shared tokens (base.css, theme-light.css) and
   takes over fonts, gradients and glows, so every page reads as one calm product.
   It also carries the site-wide small-screen rules.
   ============================================================ */

:root {
  --calm-bg:        #faf9f5;
  --calm-surface:   #ffffff;
  --calm-surface-2: #f5f3ed;
  --calm-surface-3: #ece9e0;
  --calm-line:      #e6e2d8;
  --calm-line-2:    #d6d1c4;
  --calm-ink:       #2b2a27;
  --calm-ink-2:     #5f5b53;
  --calm-ink-3:     #77726a;
  --calm-accent:    #9a5b3c;
  --calm-accent-2:  #83492d;
  --calm-accent-soft: #f5ebe4;
  --calm-sage:      #5f7a64;
  --calm-sage-soft: #e9efe7;
  --calm-warn:      #a86b12;
  --calm-danger:    #b3412f;
  --font-sans:  'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-mono:  ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* The shared tokens from base.css / theme-light.css, re-pointed. */
  --bg: var(--calm-bg);            --bg-2: var(--calm-surface-2);
  --surface: var(--calm-surface);  --surface-2: var(--calm-surface-2); --surface-3: var(--calm-surface-3);
  --border: var(--calm-line);      --border-2: var(--calm-line-2);     --border-3: rgba(43,42,39,.06);
  --tx: var(--calm-ink);           --tx-2: var(--calm-ink-2);          --tx-3: var(--calm-ink-3);
  --tx-4: var(--calm-line-2);      --white: #ffffff;
  --cyan: var(--calm-accent);      --cyan-2: var(--calm-accent-2);     --cyan-3: #b97a58;
  --emerald: var(--calm-sage);     --emerald-2: #4d6652;
  --purple: var(--calm-accent);    --amber: var(--calm-warn);          --red: var(--calm-danger);
  --green-neon: var(--calm-accent); --blue-bright: var(--calm-accent);
  --grad-brand: linear-gradient(0deg, var(--calm-accent), var(--calm-accent));
  --grad-cta: linear-gradient(0deg, var(--calm-accent), var(--calm-accent));
  --grad-purple: linear-gradient(0deg, var(--calm-accent), var(--calm-accent));
  --shadow-glow-cyan: 0 1px 2px rgba(43,42,39,.06);
  --shadow-glow-emerald: 0 1px 2px rgba(43,42,39,.06);
  --shadow-card: 0 1px 2px rgba(43,42,39,.05), 0 2px 8px rgba(43,42,39,.04);
  --shadow-card-hover: 0 2px 6px rgba(43,42,39,.07), 0 8px 24px rgba(43,42,39,.06);

  /* Names used by the stand-alone pages' own :root blocks. */
  --bg2: var(--calm-surface-2); --bg3: var(--calm-surface); --bg4: var(--calm-surface-2);
  --accent: var(--calm-accent); --tx2: var(--calm-ink-2); --tx3: var(--calm-ink-3);
  --ink: var(--calm-ink); --muted: var(--calm-ink-2); --line: var(--calm-line);
  --panel: var(--calm-surface); --card: var(--calm-surface); --accent-soft: var(--calm-accent-soft);
  --primary: var(--calm-accent); --primary-dark: var(--calm-accent-2); --text: var(--calm-ink);
  --secondary: var(--calm-ink-2);
  --teal: var(--calm-accent); --teal-2: var(--calm-accent-2); --teal-3: #b97a58;
  --navy: var(--calm-bg); --navy-2: var(--calm-surface-2); --navy-surface: var(--calm-surface);
  --navy-border: var(--calm-line);
  color-scheme: light;
}

/* ── Type ─────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans) !important;
  background: var(--calm-bg) !important;
  color: var(--calm-ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* Every page picked its own fonts (Inter, Plus Jakarta Sans, Space Grotesk, Manrope…).
   One sans for text and one serif for headings; icons and code keep theirs. */
/* :where() keeps this at the lowest specificity, so the heading rule below and the icon
   fonts' own rules win over it. */
body :where(*:not(.material-symbols-outlined, .material-icons, .material-symbols-rounded, code, pre, kbd, samp,
                   [class*="mono"], [style*="monospace"], h1, h1 *, h2, h2 *, h3, h3 *)) {
  font-family: var(--font-sans) !important;
}
.material-symbols-outlined { font-family: 'Material Symbols Outlined' !important; }
.material-symbols-rounded { font-family: 'Material Symbols Rounded' !important; }
.material-icons { font-family: 'Material Icons' !important; }
body h1, body h2, body h3, body h1 *, body h2 *, body h3 *,
body .font-headline, body [class*="headline"] {
  font-family: var(--font-serif) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: var(--calm-ink);
}
body h4, body h5, body h6 { font-weight: 600; letter-spacing: 0; color: var(--calm-ink); }
body h1 { line-height: 1.15; }
code, pre, kbd, samp { font-family: var(--font-mono) !important; }
p { color: var(--calm-ink-2); }

/* Gradient text, neon glows and glass: plain, readable colour instead. */
.text-grad, .text-grad-purple, .gradient-text, [class*="text-gradient"], .bg-clip-text {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--calm-accent) !important;
}
.glass-card, .glass, [class*="glass"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--calm-surface) !important;
}
[class*="glow"] { text-shadow: none !important; }

/* Tailwind text colours chosen for the old dark pages; on the light site they are too pale. */
.text-slate-100, .text-slate-200, .text-slate-300, .text-gray-200, .text-gray-300,
.text-zinc-300, .text-neutral-300 { color: var(--calm-ink-2) !important; }
.text-cyan-300, .text-cyan-400, .text-sky-300, .text-sky-400, .text-teal-300, .text-teal-400,
.text-blue-300, .text-blue-400, .text-indigo-300, .text-indigo-400, .text-violet-400,
.text-purple-300, .text-purple-400, .text-primary-container { color: var(--calm-accent) !important; }
.text-emerald-300, .text-emerald-400, .text-green-300, .text-green-400 { color: var(--calm-sage) !important; }
.text-amber-300, .text-amber-400, .text-yellow-300, .text-yellow-400 { color: var(--calm-warn) !important; }
.text-red-300, .text-red-400, .text-rose-400 { color: var(--calm-danger) !important; }

a { color: inherit; }
::selection { background: var(--calm-accent-soft); color: var(--calm-ink); }
:focus-visible { outline: 2px solid var(--calm-accent); outline-offset: 2px; }

/* ── Small screens ────────────────────────────────────────── */
img, video, canvas, iframe { max-width: 100%; }
img, video { height: auto; }
pre { max-width: 100%; overflow-x: auto; }

@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
  body { font-size: 15px; }
  /* Wide tables scroll inside themselves instead of stretching the page. */
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Long words, URLs and ids wrap instead of pushing the layout sideways. */
  p, li, td, th, dd, dt, h1, h2, h3, h4, span, a, label { overflow-wrap: anywhere; }
  body h1 { font-size: clamp(1.8rem, 7vw, 2.4rem) !important; }
  body h2 { font-size: clamp(1.4rem, 5.5vw, 1.9rem) !important; }
  /* Fixed multi-column grids stack. */
  [style*="grid-template-columns"]:not([style*="auto-fit"]):not([style*="auto-fill"]) {
    grid-template-columns: 1fr !important;
  }
  input, select, textarea { max-width: 100%; font-size: 16px; }  /* no zoom-on-focus in iOS */
  .container, .container-wide { padding-left: 16px !important; padding-right: 16px !important; }

  /* Page layouts and card grids: one column. (Found by measuring every page at 390 px.) */
  .grid-2, .grid-3, .platform-grid, .usecase-grid, .compliance-grid,
  .ds-layout, .ed-layout, .ds-grid-2, .ed-grid-2, .form-row, .food-field, .journey-step,
  .footer-grid, .style-grid, .pipeline-products, .hero-layout, .layout, main > .grid,
  .grid-cols-2:not(.stats), .grid-cols-3, .grid-cols-12, .md\:grid-cols-3, .md\:grid-cols-6,
  body div.grid:not([class*="grid-cols-4"]):not([class*="grid-cols-5"]):not([class*="grid-cols-6"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .grid-cols-12 > * { grid-column: auto !important; }
  /* Rows of small figures: two columns. */
  .grid-4, .stats, .feature-stats, .obs-grid, .grid-cols-4, .grid-cols-5, .grid-cols-6,
  #detailNutritionGrid, .ds-presets, .ed-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .txn-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 4px; }
  /* Tabs and toolbars scroll inside themselves rather than widening the page. */
  .tabs, .toolbar, .preview-toolbar, .w-fit[class*="rounded-xl"] {
    max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none;
  }
  /* Rows of items wrap. */
  [style*="display:flex"]:not([style*="wrap"]), [style*="display: flex"]:not([style*="wrap"]),
  .flex.items-center:not(.flex-nowrap):not(.w-fit), .flex.justify-between, .activity-item, header.flex,
  .ed-steps, .ds-steps, .topbar-right {
    flex-wrap: wrap;
  }
  .topbar-right { min-width: 0; }
  .designer-layout { flex-direction: column; }
  .hero-glow, .cta-glow { display: none; }                    /* decoration only */
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  /* Pages with their own top bar (engine demo, decision studio): it wraps. */
  header.topbar:has(.ed-steps), .topbar-left:has(.ds-topbar-center) { flex-wrap: wrap; height: auto; }
  header.topbar:has(.ed-steps) { left: 0 !important; }
  /* A fixed header sized to sit beside the desktop sidebar spans the screen. */
  header.fixed[class*="calc(100%-"] { width: 100% !important; left: 0 !important; padding-left: 64px !important; }
  /* Pages with their own filter sidebar: it sits above the content. */
  aside.sidebar { position: static !important; width: auto !important; height: auto !important; }
  .content { margin-left: 0 !important; padding: 16px !important; }
  code { white-space: pre-wrap; overflow-wrap: anywhere; }
}