/* ============================================================================
   LITHOS INSURANCE ADVISORY — BRAND DESIGN TOKENS
   "Layered planning, lasting wealth."

   Single source of truth for the whole site (landing pages, intake form,
   member portal, email shells). Link this first, then build on the
   semantic tokens — avoid hard-coding raw hex anywhere downstream.

       <link rel="stylesheet" href="/css/lithos-tokens.css">

   Brand system is LOCKED. Edit the RAW PALETTE block only if the brand
   guide changes; everything else derives from it.
   ============================================================================ */

:root {
  /* ---- RAW PALETTE (locked) ------------------------------------------- */
  --lithos-green-900:   #0F2625;  /* primary dark green — covers, deep bg   */
  --lithos-green-800:   #13302F;  /* panel green                            */
  --lithos-green-700:   #16352F;  /* panel green (alt)                      */
  --lithos-gold:        #C9A24A;  /* primary gold accent                    */
  --lithos-gold-dark:   #B8923D;  /* gold hover / pressed                   */
  --lithos-cream:       #FBFAF5;  /* page background                        */
  --lithos-ink:         #1A2422;  /* primary text                          */
  --lithos-muted:       #5C6B66;  /* secondary text                        */
  --lithos-line:        #E4E0D4;  /* hairline dividers                      */
  --lithos-line-strong: #D2CCBD;  /* stronger borders / inputs             */
  --lithos-white:       #FFFFFF;  /* surfaces on cream                      */

  /* ---- SEMANTIC ALIASES (use these in components) --------------------- */
  --color-bg:            var(--lithos-cream);
  --color-bg-deep:       var(--lithos-green-900);   /* dark sections, footers */
  --color-surface:       var(--lithos-white);       /* cards on cream         */
  --color-surface-panel: var(--lithos-green-800);   /* panels on dark         */
  --color-surface-panel-alt: var(--lithos-green-700);

  --color-text:          var(--lithos-ink);
  --color-text-muted:    var(--lithos-muted);
  --color-text-on-dark:  var(--lithos-cream);
  --color-text-on-dark-muted: #A9B6B0;

  --color-accent:        var(--lithos-gold);
  --color-accent-hover:  var(--lithos-gold-dark);
  --color-on-accent:     var(--lithos-green-900);   /* text on gold buttons   */

  --color-border:        var(--lithos-line);
  --color-border-strong: var(--lithos-line-strong);
  --color-border-on-dark: rgba(201, 162, 74, 0.30); /* gold hairline on green */

  /* Status (kept subtle, brand-aligned — for form validation, banners) */
  --color-success:       #3E7C5C;
  --color-error:         #A3492F;
  --color-focus-ring:    var(--lithos-gold);

  /* ---- TYPOGRAPHY ----------------------------------------------------- */
  /* Display = Georgia/serif. Body/UI = system sans. (Per brand brief.) */
  --font-display: Georgia, "Times New Roman", "Liberation Serif", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, "Liberation Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* Type scale (1.250 major-third, 16px base) */
  --text-xs:   0.75rem;   /* 12px — captions, legal/disclaimers          */
  --text-sm:   0.875rem;  /* 14px — UI labels, fine print                */
  --text-base: 1rem;      /* 16px — body                                 */
  --text-lg:   1.125rem;  /* 18px — lead paragraphs                      */
  --text-xl:   1.375rem;  /* 22px — card titles                          */
  --text-2xl:  1.75rem;   /* 28px — section headings                     */
  --text-3xl:  2.25rem;   /* 36px — page headings                        */
  --text-4xl:  3rem;      /* 48px — hero display                         */

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;   /* eyebrows / small-caps labels           */
  --tracking-wider:  0.12em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- SPACING (4px base) -------------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;

  /* ---- RADII ---------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ---- ELEVATION ------------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(15, 38, 37, 0.06);
  --shadow-md: 0 4px 16px rgba(15, 38, 37, 0.08);
  --shadow-lg: 0 12px 40px rgba(15, 38, 37, 0.14);

  /* ---- LAYOUT --------------------------------------------------------- */
  --container-max: 1140px;
  --content-max:   720px;   /* readable prose / form column               */
  --rail-width:    300px;   /* intake-form left sticky rail               */
  --bp-collapse:   880px;   /* single-column breakpoint                   */

  /* ---- MOTION --------------------------------------------------------- */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 140ms;
  --duration-base: 240ms;
  --duration-slow: 420ms;

  /* ---- FOCUS ---------------------------------------------------------- */
  --focus-ring: 0 0 0 3px rgba(201, 162, 74, 0.45);
}

/* ============================================================================
   BASE LAYER — sensible defaults so pages inherit the brand without effort.
   Drop this in once; override per component as needed.
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-text);
  line-height: var(--leading-tight);
  font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--text-4xl); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { margin: 0 0 var(--space-4); max-width: var(--content-max); }

a {
  color: var(--color-accent-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { color: var(--color-accent); }

/* Eyebrow / label utility — for small-caps section markers */
.lithos-eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-hover);
}

/* Tagline lockup */
.lithos-tagline {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-text-muted);
}
/* Content shortcut: <span class="lithos-tagline" data-tagline></span> */
[data-tagline]::after { content: "Layered planning, lasting wealth."; }

/* ---- Primary button -------------------------------------------------- */
.lithos-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-on-accent);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.lithos-btn:hover { background: var(--color-accent-hover); }
.lithos-btn:active { transform: translateY(1px); }

.lithos-btn--ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
}
.lithos-btn--ghost:hover { background: rgba(15, 38, 37, 0.04); }

/* ---- Card ------------------------------------------------------------ */
.lithos-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}

/* ---- Form fields ----------------------------------------------------- */
.lithos-input,
.lithos-select,
.lithos-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.lithos-input:focus,
.lithos-select:focus,
.lithos-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}
.lithos-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

/* Disclaimer / legal text — keep compliant copy visually distinct */
.lithos-disclaimer {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

/* ---- Dark section helper (covers, footers, hero) --------------------- */
.lithos-on-dark {
  background: var(--color-bg-deep);
  color: var(--color-text-on-dark);
}
.lithos-on-dark h1,
.lithos-on-dark h2,
.lithos-on-dark h3,
.lithos-on-dark h4 { color: var(--color-text-on-dark); }
.lithos-on-dark .lithos-tagline { color: var(--color-text-on-dark-muted); }
.lithos-on-dark hr,
.lithos-on-dark .lithos-divider { border-color: var(--color-border-on-dark); }

/* ---- Accessibility floor -------------------------------------------- */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}