/* Premium landingpages: design tokens of the house style.
   Clients change colors and fonts in brand.css only. Derived tints follow automatically. */
:root {
  /* Brand (default: Unchained Consulting) */
  --brand: #B8862B;
  --brand-deep: #0a0a0a;
  --brand-soft: #D9A441;
  --brand-text: #7a5818;
  --cta: #D9A441;
  --cta-ink: #0a0a0a;
  --urgent: #B42318;
  --on-urgent: #ffffff;
  --vip-from: #f6e7bf;
  --vip-to: #fffcf0;
  --vip-ink: #6e4f16;
  --vip-cta: #8a6420;

  /* Neutrals */
  --ink: #14110d;
  --ink-muted: #6b665e;
  --surface: #ffffff;
  --surface-mist: #f6f5f3;
  --line: #e7e3dc;
  --on-deep: #ffffff;
  --on-brand: #ffffff;

  /* Type */
  --font-text: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-accent: "Instrument Serif", Georgia, "Times New Roman", serif;

  /* Derived tints */
  --brand-4: color-mix(in srgb, var(--brand) 4%, transparent);
  --brand-10: color-mix(in srgb, var(--brand) 10%, transparent);
  --brand-20: color-mix(in srgb, var(--brand) 20%, transparent);
  --brand-40: color-mix(in srgb, var(--brand) 40%, transparent);
  --urgent-8: color-mix(in srgb, var(--urgent) 8%, transparent);
  --urgent-20: color-mix(in srgb, var(--urgent) 20%, transparent);
  --on-deep-muted: color-mix(in srgb, var(--on-deep) 70%, transparent);
  --on-deep-line: color-mix(in srgb, var(--on-deep) 12%, transparent);
  --accent-gradient: linear-gradient(120deg, color-mix(in srgb, var(--brand) 78%, black) 0%, var(--brand) 50%, color-mix(in srgb, var(--brand) 85%, black) 100%);
  --accent-gradient-deep: linear-gradient(120deg, var(--brand-soft) 0%, color-mix(in srgb, var(--brand-soft) 65%, white) 50%, var(--brand-soft) 100%);

  /* Shape and depth */
  --radius-s: 0.5rem;
  --radius-m: 0.75rem;
  --radius-l: 1rem;
  --radius-pill: 999px;
  --shadow-s: 0 1px 2px rgb(20 17 13 / 0.05), 0 6px 16px -10px rgb(20 17 13 / 0.18);
  --shadow-m: 0 1px 2px rgb(20 17 13 / 0.04), 0 24px 48px -28px rgb(20 17 13 / 0.28);
  --shadow-cta: 0 14px 30px -16px color-mix(in srgb, var(--cta) 85%, black);

  /* Layout */
  --container: 72rem;
  --container-narrow: 46rem;
  --gutter: 1rem;
  --section-y: 4.5rem;

  /* Motion */
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
}

@media (min-width: 768px) {
  :root { --gutter: 2rem; --section-y: 6rem; }
}

/* Dark theme. The inline head script sets data-theme on <html> before the first paint, so the visitor's
   choice in the switch always wins over the OS setting. Brand colors follow --brand-soft, so client brands
   work without extra values; clients may override dark values in brand.css with the same selector. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand: var(--brand-soft);
  --brand-text: var(--brand-soft);
  --brand-deep: #17140f;
  --urgent: #F97066;
  --on-urgent: #0a0a0a;
  --vip-from: #2b2214;
  --vip-to: #17140f;
  --vip-ink: #F2C66B;
  --ink: #f4f1ec;
  --ink-muted: #a59d90;
  --surface: #0b0a08;
  --surface-mist: #13110e;
  --line: #2a261f;
  --on-brand: #0a0a0a;
  --shadow-s: 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 16px -10px rgb(0 0 0 / 0.7);
  --shadow-m: 0 1px 2px rgb(0 0 0 / 0.4), 0 24px 48px -28px rgb(0 0 0 / 0.9);
  --accent-gradient: linear-gradient(120deg, var(--brand-soft) 0%, color-mix(in srgb, var(--brand-soft) 65%, white) 50%, var(--brand-soft) 100%);
}