/*
  Axioragroup — shared design tokens.
  Heritage terracotta / umber / wine dark theme, tinted from British brick
  and clay — not the generic teal→blue→violet AI-SaaS default, and not the
  gold-on-black "premium dark mode" that's becoming its own AI tell. Both
  the marketing site (style.css) and the dashboard app (app.css) import
  this file and must not redefine these values locally. Variable NAMES are
  kept stable for existing components; only the color VALUES were retuned.
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Surfaces — warm near-black tinted toward the brand terracotta hue */
  --bg: oklch(13% 0.012 42);
  --bg-elevated: oklch(16% 0.014 42);
  --surface: oklch(20% 0.016 42);
  --surface-2: oklch(24% 0.018 42);
  --border: oklch(85% 0.02 42 / 10%);
  --border-strong: oklch(85% 0.02 42 / 17%);

  /* Text */
  --text: oklch(96% 0.008 42);
  --text-muted: oklch(72% 0.02 42);
  --text-faint: oklch(58% 0.02 42);

  /* Brand accents — terracotta → umber → wine */
  --teal: oklch(66% 0.16 42);        /* terracotta/brick (brand, was mint-teal) */
  --teal-bright: oklch(74% 0.16 46); /* bright terracotta highlight */
  --blue: oklch(66% 0.13 65);        /* umber/ochre (was cool blue) */
  --violet: oklch(69% 0.11 350);     /* deep wine/aubergine (was violet) */
  --gradient-brand: linear-gradient(90deg, var(--teal-bright), var(--blue), var(--violet));
  --gradient-btn: linear-gradient(90deg, var(--teal-bright), var(--blue));
  --green: oklch(68% 0.14 145);
  --red: oklch(67% 0.2 25);
  --amber: oklch(78% 0.15 85);
  --on-accent: oklch(13% 0.02 42);

  /* Typography */
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* Shadows / glow */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35);
  --glow-teal: 0 0 60px oklch(66% 0.16 42 / 15%);
  --glow-violet: 0 0 80px oklch(56% 0.11 350 / 20%);

  /* Layout */
  --container-w: 1200px;
  --nav-h: 72px;

  /* Easing */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-display {
  font-family: var(--font-display);
  color: var(--text);
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

p { margin: 0; color: var(--text-muted); line-height: 1.6; }

a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}

.gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
  letter-spacing: 0.02em;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.btn:hover { transform: translateY(-1px); opacity: 0.92; }

.btn-primary {
  background: var(--gradient-btn);
  color: var(--on-accent);
}

.btn-secondary {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text);
}

.btn-ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.eyebrow {
  color: var(--teal);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

::selection { background: var(--violet); color: #fff; }

@media (max-width: 860px) {
  :root { --nav-h: 64px; }
}