/* Modern 2026 design layer — tier: tokens (design tokens / :root) */

/* ============================================================================
   Dragon Hill — "Modern Luxury Green" design layer
   ----------------------------------------------------------------------------
   Loaded LAST (precedence="modern") on top of the legacy Bootstrap 3 + "tint"
   template sheets, so these rules win the cascade. This file holds the design
   tokens + modern global styling (typography, colour, buttons, forms, focus).
   Component-specific modern styling lives alongside each component / phase.
   Fonts come from next/font (layout.tsx) as --ff-serif / --ff-sans.
   ============================================================================ */

:root {
  /* ---- Brand greens ---- */
  --c-primary: #1b7a4b;       /* deepened emerald — primary actions/links     */
  --c-primary-600: #166040;
  --c-primary-700: #114a31;
  --c-primary-050: #eaf3ec;   /* tint backgrounds                              */
  --c-brand: #02b256;         /* original bright brand green — small accents   */

  /* ---- Gold accent (luxury) ---- */
  --c-gold: #c9a24b;
  --c-gold-600: #a9863a;
  --c-gold-line: rgba(201, 162, 75, 0.45);

  /* ---- Teal (logo wordmark "DRAGON HILL") — header accent ---- */
  --c-teal: #007074;
  --c-teal-600: #005e62;
  --c-teal-700: #014b4e;
  --c-teal-050: #e6f0f0;

  /* ---- Neutrals ---- */
  --c-ink: #1c2521;           /* headings — near-black green                    */
  --c-text: #38423b;          /* body text                                     */
  --c-muted: #76837b;         /* secondary text                                */
  --c-cream: #f7f5ef;         /* warm section background                        */
  --c-bg: #ffffff;
  --c-bg-alt: #f4f7f4;        /* cool light-green section background            */
  --c-line: rgba(20, 45, 30, 0.10);
  --c-line-strong: rgba(20, 45, 30, 0.18);

  /* ---- Glass ---- */
  --c-glass: rgba(255, 255, 255, 0.72);

  /* ---- Typography (font families) ---- */
  --font-sans: var(--ff-sans), system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: var(--ff-serif), Georgia, "Times New Roman", serif;

  /* ---- Fluid type scale (clamp: mobile → desktop, ~1.2–1.25 modular ratio) ---- */
  --fs-display: clamp(2.5rem, 1.6rem + 4.5vw, 5rem);
  --fs-h1: clamp(2.125rem, 1.55rem + 2.9vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.75vw, 2.75rem);
  --fs-h3: clamp(1.4375rem, 1.2rem + 1.2vw, 2.125rem);
  --fs-h4: clamp(1.1875rem, 1.05rem + 0.7vw, 1.625rem);
  --fs-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --fs-body: clamp(1rem, .97rem + .15vw, 1.125rem);
  --fs-sm: .875rem;
  --fs-eyebrow: .8125rem;

  /* ---- Spacing scale ---- */
  --sp-xs: .5rem;
  --sp-sm: 1rem;
  --sp-md: 1.5rem;
  --sp-lg: 2.5rem;
  --sp-xl: 4rem;
  --sp-2xl: 6rem;
  --sp-3xl: 8rem;

  /* ---- Section rhythm ---- */
  --section-y: clamp(4rem, 2.5rem + 6.5vw, 8rem);

  /* ---- Layout ---- */
  --container: 1200px;
  --container-narrow: 760px;
  --header-h: 84px;

  /* ---- Radii ---- */
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---- Shadows (soft, layered) ---- */
  --sh-1: 0 1px 2px rgba(16, 40, 28, 0.06), 0 2px 8px rgba(16, 40, 28, 0.05);
  --sh-2: 0 6px 24px rgba(16, 40, 28, 0.10);
  --sh-3: 0 18px 50px rgba(16, 40, 28, 0.16);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --t: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Extended spacing ---- */
  --sp-4xl: 10rem;

  /* ---- Elevated shadow (hero/feature cards) ---- */
  --sh-4: 0 32px 80px rgba(16, 40, 28, 0.22);

  /* ---- Motion — spring + directional easings ---- */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-spring: 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Gradient accents ---- */
  --gradient-gold: linear-gradient(135deg, var(--c-gold), var(--c-gold-600));
  --gradient-emerald: linear-gradient(135deg, var(--c-primary), var(--c-primary-700));
  --gradient-teal: linear-gradient(135deg, var(--c-teal), var(--c-teal-700));

  /* ---- Blur tokens ---- */
  --blur-glass: blur(12px) saturate(1.4);
  --blur-frost: blur(20px) saturate(1.6);
}