/* =====================================================================
   Van Dyke Trusts & Estates Law — Foundation Tokens
   colors_and_type.css

   Brand pivot: this firm is a San Diego trust/probate LITIGATION practice
   (not an estate-planning advisor), led by Richard "Scott" Van Dyke since
   1998. Their existing brand uses a "Bold Silver" wordmark and Pacific-blue
   imagery (Cessna over blue water). This palette codifies that:

       Deep Navy   →  Authority, courtroom, water
       Silver      →  The existing silver wordmark
       Cream/Bone  →  Editorial restraint, breathing room
       Gold        →  AV Preeminent / honor markers only

   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Public+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ===================================================================
     COLOR
     =================================================================== */

  /* Navy — the signature. "Van Dyke Navy" at 700. */
  --vd-navy-900: #061523;
  --vd-navy-800: #0A2138;
  --vd-navy-700: #0E2B45;        /* ← signature */
  --vd-navy-600: #173E5E;
  --vd-navy-500: #245680;
  --vd-navy-400: #4A7AA3;
  --vd-navy-300: #7C9FBE;
  --vd-navy-200: #B5CBDE;
  --vd-navy-100: #DDE6EF;
  --vd-navy-50:  #EEF3F8;

  /* Silver / Slate — neutral cool grays (matches the silver wordmark) */
  --vd-silver-900: #1A1D21;       /* near-black text */
  --vd-silver-800: #2A2E33;
  --vd-silver-700: #3F454C;
  --vd-silver-600: #5A6068;
  --vd-silver-500: #7B8089;       /* mid */
  --vd-silver-400: #9CA3AE;       /* ← signature "silver" */
  --vd-silver-300: #BDC3CC;
  --vd-silver-200: #D8DCE3;
  --vd-silver-100: #E8EBEF;
  --vd-silver-50:  #F2F4F7;

  /* Surface — warm-tinted whites, NOT pure white. Editorial paper feel. */
  --vd-bone:    #FCFBF8;          /* lightest surface */
  --vd-cream:   #F7F5EF;          /* default page surface */
  --vd-parch:   #EFEBE0;          /* sunken / inset */
  --vd-paper:   #FFFFFF;          /* documents only */

  --vd-ink:       #0F1418;        /* primary text */
  --vd-ink-soft:  #2A2F36;        /* secondary text */

  /* Accents */
  --vd-gold-700: #7D5E22;
  --vd-gold-500: #A8842F;          /* AV Preeminent · honor mark */
  --vd-gold-300: #D4B677;
  --vd-gold-100: #F0E4C1;

  --vd-pacific-700: #145A78;
  --vd-pacific-500: #1F86A8;       /* coastal water accent */
  --vd-pacific-300: #7AB8CE;
  --vd-pacific-100: #D2E7EF;

  --vd-oxblood-700: #4F1218;
  --vd-oxblood-500: #6B1E26;       /* danger / alarm */
  --vd-oxblood-300: #A65864;
  --vd-oxblood-100: #E8C9CC;

  --vd-sage-700: #2E4A37;
  --vd-sage-500: #4F6E58;          /* favorable ruling / win */
  --vd-sage-300: #93AC97;
  --vd-sage-100: #DEE6DF;

  /* ----- Semantic tokens (use these in components) ----- */
  --color-bg:            var(--vd-cream);
  --color-bg-elevated:   var(--vd-bone);
  --color-bg-sunken:     var(--vd-parch);
  --color-bg-inverse:    var(--vd-navy-900);

  --color-surface:       var(--vd-bone);
  --color-surface-alt:   var(--vd-silver-50);

  --color-fg:            var(--vd-ink);
  --color-fg-strong:     var(--vd-navy-900);
  --color-fg-muted:      var(--vd-silver-600);
  --color-fg-subtle:     var(--vd-silver-400);
  --color-fg-on-dark:    var(--vd-cream);
  --color-fg-on-dark-muted: var(--vd-silver-300);

  --color-border:        var(--vd-silver-200);
  --color-border-strong: var(--vd-silver-300);
  --color-border-faint:  var(--vd-silver-100);
  --color-rule:          var(--vd-navy-700);

  --color-accent:        var(--vd-navy-700);     /* primary CTA */
  --color-accent-hover:  var(--vd-navy-800);
  --color-accent-press:  var(--vd-navy-900);
  --color-accent-soft:   var(--vd-navy-100);

  --color-honor:         var(--vd-gold-500);     /* AV badge, awards */
  --color-water:         var(--vd-pacific-500);
  --color-favorable:     var(--vd-sage-500);
  --color-danger:        var(--vd-oxblood-500);

  --color-link:          var(--vd-navy-700);
  --color-link-hover:    var(--vd-pacific-500);
  --color-focus:         var(--vd-gold-500);

  /* ===================================================================
     TYPE
     Display: Cormorant Garamond — high-contrast classical serif.
     UI/Body: Public Sans — neutral humanist sans.
     Mono:    JetBrains Mono — case citations, bar numbers, docket nos.
     =================================================================== */

  --font-display: "Cormorant Garamond", "Garamond", "Times New Roman", serif;
  --font-sans:    "Public Sans", "Helvetica Neue", Helvetica, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, monospace;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;

  --lh-display: 1.04;
  --lh-heading: 1.15;
  --lh-snug:    1.35;
  --lh-body:    1.6;
  --lh-loose:   1.75;

  --ls-display:  -0.018em;
  --ls-heading:  -0.008em;
  --ls-body:      0em;
  --ls-eyebrow:   0.18em;       /* uppercase eyebrow labels */
  --ls-caps:      0.08em;

  /* ===================================================================
     SPACE / RADII / SHADOW / MOTION
     =================================================================== */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radii — sharp. Litigation isn't soft. */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-pill: 999px;

  /* Shadows — cool, low. */
  --shadow-hairline: 0 0 0 1px var(--color-border);
  --shadow-sm: 0 1px 2px rgba(14, 43, 69, 0.08), 0 1px 1px rgba(14, 43, 69, 0.04);
  --shadow-md: 0 4px 16px rgba(14, 43, 69, 0.10), 0 1px 2px rgba(14, 43, 69, 0.05);
  --shadow-lg: 0 14px 40px rgba(14, 43, 69, 0.16), 0 2px 6px rgba(14, 43, 69, 0.08);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(14, 43, 69, 0.04);

  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0.0, 1, 1);
  --duration-fast: 140ms;
  --duration:      220ms;
  --duration-slow: 360ms;

  --container-narrow: 720px;
  --container:        1080px;
  --container-wide:   1280px;
  --container-full:   1440px;
}

/* =====================================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ===================================================================== */

body, .vd-body {
  font-family: var(--font-sans);
  font-size:   var(--fs-16);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.vd-display, h1.vd-display {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: clamp(3rem, 6vw, var(--fs-96));
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--color-fg-strong);
}

h1, .vd-h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-56); line-height: var(--lh-heading);
  letter-spacing: var(--ls-display); color: var(--color-fg-strong);
}
h2, .vd-h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-40); line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading); color: var(--color-fg-strong);
}
h3, .vd-h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-28); line-height: var(--lh-heading);
  color: var(--color-fg-strong);
}
h4, .vd-h4 {
  font-family: var(--font-sans); font-weight: 600;
  font-size: var(--fs-18); line-height: var(--lh-snug);
  color: var(--color-fg-strong);
}

.vd-lead {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: var(--fs-24); line-height: var(--lh-snug); color: var(--color-fg);
}

.vd-eyebrow {
  font-family: var(--font-sans); font-weight: 500;
  font-size: var(--fs-12); line-height: 1;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--color-accent);
}

.vd-label {
  font-family: var(--font-sans); font-weight: 500;
  font-size: var(--fs-13); letter-spacing: 0.02em;
  color: var(--color-fg);
}

.vd-caption {
  font-family: var(--font-sans); font-weight: 400;
  font-size: var(--fs-13); line-height: var(--lh-snug);
  color: var(--color-fg-muted);
}

p, .vd-p {
  font-family: var(--font-sans); font-size: var(--fs-16);
  line-height: var(--lh-body); color: var(--color-fg);
  text-wrap: pretty;
}

.vd-prose p { max-width: 64ch; margin-bottom: var(--space-4); }
.vd-prose p + p { margin-top: var(--space-4); }

.vd-quote {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: var(--fs-32); line-height: 1.3; color: var(--color-fg-strong);
  border-left: 2px solid var(--color-accent);
  padding-left: var(--space-6);
}

.vd-mono, code, kbd {
  font-family: var(--font-mono); font-size: 0.92em; letter-spacing: 0;
}

a.vd-link, .vd-link {
  color: var(--color-link); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: var(--vd-navy-300);
  transition: text-decoration-color var(--duration) var(--ease-standard),
              color var(--duration) var(--ease-standard);
}
.vd-link:hover { color: var(--color-link-hover); text-decoration-color: currentColor; }

.vd-rule { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-8) 0; }
.vd-rule--accent { border: 0; border-top: 2px solid var(--color-accent); width: 48px; margin: var(--space-6) 0; }