/* =============================================================================
   BUFORD CARE · TIMELESS AI — DESIGN TOKENS
   -----------------------------------------------------------------------------
   The single source of truth for the page's visual language. Values extend the
   existing Buford Care brand system (bronze/taupe, warm ink, cream, terracotta,
   gold; DM Serif Display + DM Sans) so this page drops cleanly into the live
   design system / CMS. Every component in main.css consumes these variables —
   re-theme the whole page by editing this file alone.
   ========================================================================== */

:root {
  /* ---- Brand ink (warm near-blacks for cinematic surfaces) ---------------- */
  --ink-950: #0E0C0A;
  --ink-900: #14110E;
  --ink-800: #1D1916;          /* brand "navy" */
  --ink-700: #2A2420;          /* brand "navy lift" */
  --ink-600: #3D3B38;
  --ink-500: #56514B;

  /* ---- Brand bronze / taupe (primary) ------------------------------------ */
  --bronze-800: #5A4836;
  --bronze-700: #6F5A45;       /* brand teal-deep */
  --bronze-600: #866D57;       /* brand teal-light */
  --bronze-500: #997F66;       /* brand PRIMARY */
  --bronze-400: #AD9580;
  --bronze-300: #C7B5A2;       /* light — readable on dark */
  --bronze-200: #E0D5C8;
  --bronze-100: #F2EDE6;       /* brand teal-pale */

  /* ---- Warm accents ------------------------------------------------------- */
  --terra-600: #A85E2A;
  --terra-500: #C5753A;        /* brand accent (terracotta/copper) */
  --terra-300: #E8A877;
  --terra-100: #FDF0E6;
  --gold-600: #B8860B;         /* brand gold */
  --gold-500: #CFA23A;
  --gold-400: #E6C260;         /* champagne highlight (dark bg) */
  --gold-100: #FFFBEA;

  /* ---- Neutrals (warm) ---------------------------------------------------- */
  --white: #FFFFFF;
  --cream: #F6F4F1;            /* brand cream */
  --cream-warm: #FAF7F3;       /* brand cream-warm */
  --sand-50: #F6F4F1;
  --sand-100: #ECE7E0;
  --sand-200: #D6D0C7;
  --sand-300: #BDB5AA;
  --gray-400: #A39C92;
  --gray-500: #837C73;
  --gray-600: #6B645D;
  --gray-700: #514C46;
  --gray-800: #3D3B38;

  /* ---- Semantic surface + text (light context = default) ----------------- */
  --surface: var(--cream-warm);
  --surface-raised: var(--white);
  --surface-sunken: var(--cream);
  --text-strong: var(--ink-800);
  --text: #44403B;
  --text-muted: var(--gray-600);
  --text-faint: var(--gray-500);
  --border: rgba(29, 25, 22, 0.10);
  --border-strong: rgba(29, 25, 22, 0.16);
  --hairline: rgba(29, 25, 22, 0.07);

  /* ---- Semantic tokens for dark / cinematic context ---------------------- */
  --on-dark-strong: #FBF8F4;
  --on-dark: rgba(246, 244, 241, 0.80);
  --on-dark-muted: rgba(246, 244, 241, 0.58);
  --on-dark-faint: rgba(246, 244, 241, 0.40);
  --border-on-dark: rgba(246, 244, 241, 0.12);
  --hairline-on-dark: rgba(246, 244, 241, 0.08);

  /* ---- Signature gradients ----------------------------------------------- */
  --grad-lux: linear-gradient(115deg, #C7B5A2 0%, #E6C260 42%, #C5753A 100%);
  --grad-lux-soft: linear-gradient(115deg, #997F66 0%, #C5753A 100%);
  --grad-champagne: linear-gradient(180deg, #F3E7CF 0%, #E6C260 55%, #C5753A 120%);
  --grad-ink: linear-gradient(165deg, #1D1916 0%, #14110E 60%, #0E0C0A 100%);
  --grad-ink-radial: radial-gradient(120% 120% at 50% 0%, #2A2420 0%, #1D1916 45%, #0E0C0A 100%);
  --grad-cream: linear-gradient(180deg, #FFFFFF 0%, #FAF7F3 100%);
  --grad-halo: radial-gradient(60% 60% at 50% 40%, rgba(230,194,96,0.28) 0%, rgba(197,117,58,0.10) 45%, transparent 72%);

  /* ---- Glassmorphism ----------------------------------------------------- */
  --glass-light-bg: rgba(255, 255, 255, 0.62);
  --glass-light-border: rgba(255, 255, 255, 0.70);
  --glass-dark-bg: rgba(35, 30, 26, 0.46);
  --glass-dark-border: rgba(246, 244, 241, 0.14);
  --glass-blur: 22px;
  --glass-blur-sm: 12px;

  /* ---- Typography -------------------------------------------------------- */
  /* Headings now use the website's base font (DM Sans) instead of a display serif */
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-body);
  --font-mono: "DM Mono", ui-monospace, "SF Mono", "Cascadia Code", monospace;

  /* Fluid type scale (min → max via viewport) */
  --fs-display-1: clamp(2.85rem, 1.6rem + 5.6vw, 5.75rem);
  --fs-display-2: clamp(2.3rem, 1.4rem + 3.9vw, 4rem);
  --fs-h2:        clamp(2rem, 1.3rem + 2.9vw, 3.35rem);
  --fs-h3:        clamp(1.45rem, 1.15rem + 1.25vw, 2.05rem);
  --fs-h4:        clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
  --fs-lead:      clamp(1.075rem, 0.99rem + 0.5vw, 1.4rem);
  --fs-body:      1.0625rem;        /* 17px */
  --fs-sm:        0.9375rem;        /* 15px */
  --fs-xs:        0.8125rem;        /* 13px */
  --fs-eyebrow:   0.78rem;

  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-base: 1.62;
  --tracking-tight: -0.022em;
  --tracking-snug: -0.012em;
  --tracking-wide: 0.02em;
  --tracking-eyebrow: 0.22em;

  /* ---- Radii (brand 8/14/22 extended) ------------------------------------ */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-2xl: 40px;
  --r-pill: 999px;

  /* ---- Shadows (warm-tinted, layered) ------------------------------------ */
  --sh-xs: 0 1px 2px rgba(29,25,22,.05);
  --sh-sm: 0 1px 3px rgba(29,25,22,.07), 0 1px 2px rgba(29,25,22,.04);
  --sh-md: 0 6px 18px -4px rgba(29,25,22,.12), 0 2px 6px -2px rgba(29,25,22,.07);
  --sh-lg: 0 18px 50px -12px rgba(29,25,22,.22), 0 6px 16px -6px rgba(29,25,22,.12);
  --sh-xl: 0 40px 90px -24px rgba(29,25,22,.30), 0 12px 30px -10px rgba(29,25,22,.16);
  --sh-glow-bronze: 0 14px 40px -10px rgba(153,127,102,.45);
  --sh-glow-gold: 0 16px 48px -12px rgba(230,194,96,.42);
  --sh-inset-hairline: inset 0 0 0 1px rgba(255,255,255,.5);

  /* ---- Motion ------------------------------------------------------------ */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.4s;
  --dur-slow: 0.7s;
  --dur-slower: 1.1s;

  /* ---- Layout ------------------------------------------------------------ */
  --container: 1200px;
  --container-wide: 1340px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);
  --nav-h: 76px;
  --site-header-h: 138px;          /* medicora fixed theme header — hero offset + anchor scroll-margin */

  /* ---- Z-index scale ----------------------------------------------------- */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky-cta: 60;
  --z-nav: 100;
  --z-modal: 1000;
  --z-toast: 1100;
}

/* Dark-context helper: components inside .ctx-dark flip their semantic tokens
   so the same component CSS reads correctly on cinematic surfaces. */
.ctx-dark {
  --surface: var(--ink-900);
  --surface-raised: var(--ink-800);
  --text-strong: var(--on-dark-strong);
  --text: var(--on-dark);
  --text-muted: var(--on-dark-muted);
  --text-faint: var(--on-dark-faint);
  --border: var(--border-on-dark);
  --hairline: var(--hairline-on-dark);
}