/* ============================================================
   field, Design Tokens (colors_and_type.css)
   Floreo Vitality LLC · fieldvitality.com
   The six locked colors ARE the brand. Never tint, shade,
   opacity-vary, or introduce new colors. See README.md.
   ============================================================ */

/* Inter (UI/body) + Italiana (wide-tracked sub-lockup), Google Fonts CDN.
   Cormorant Garamond stays self-hosted below. @import must precede @font-face. */
@import url('https://fonts.googleapis.com/css2?family=Italiana&family=Inter:wght@300;400;500;600;700&display=swap');

/* Cormorant Garamond, SELF-HOSTED variable fonts (uploaded by brand).
   fi ligature enabled via font-feature-settings below. */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond_wght_.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Italic_wght_.ttf') format('truetype');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ============================================================
     Dan's brand system (source of truth): a fogged high-desert
     horizon at dawn. Cool, misty, editorial. Gold is retired;
     teal is the single accent.
     ============================================================ */
  --horizon:      #DCE6EA; /* pale blue-grey sky                                   */
  --fog:          #EEF1EC; /* misty green-white, soft panels / inputs             */
  --ground:       #F7F8F5; /* warm white, primary background                      */
  --dry-grass:    #C9B98E; /* straw/wheat accent                                  */
  --straw-deep:   #A8946A; /* deeper straw, eyebrows / labels / footer text       */
  --teal:         #2E5E66; /* PRIMARY ACCENT: CTAs, links, active states          */
  --oxblood:      #7E3B36; /* hover / secondary accent                            */
  --graphite:     #2A2F31; /* primary text + wordmark fill                        */
  --line:         #C3CCCB; /* hairlines, rules, borders                           */

  /* Supporting greys from Dan's source */
  --body-secondary: #4A5052; /* secondary body copy   */
  --muted-note:     #8B9293; /* fine notes / captions */
  --placeholder:    #9AA2A3; /* input placeholders    */

  /* ---- Legacy field-* names, remapped to Dan's palette so existing
          component + page styles pick up the new brand automatically ---- */
  --field-midnight: var(--graphite);
  --field-cream:    var(--ground);
  --field-gold:     var(--teal);     /* gold retired -> teal accent */
  --field-olive:    var(--straw-deep);
  --field-forest:   #223A3E;         /* deep cool teal for any dark band */
  --field-ink:      var(--graphite);

  /* ---- Short aliases the legal pages reference directly ---- */
  --cream:    var(--ground);
  --ink:      var(--graphite);
  --midnight: var(--graphite);
  --olive:    var(--straw-deep);

  /* ---- Semantic surface roles ---- */
  --bg:        var(--ground);
  --fg:        var(--graphite);      /* primary text */
  --fg-muted:  var(--body-secondary);/* secondary / editorial text, captions */
  --accent:    var(--teal);          /* single accent, use sparingly */
  --hairline:  var(--line);          /* dividers, rules, borders */

  /* ---- Typography families ---- */
  --serif: 'Cormorant Garamond', 'Tiempos', 'Canela', Georgia, 'Times New Roman', serif;
  --italiana: 'Italiana', 'Cormorant Garamond', Georgia, serif; /* wide-tracked sub-lockup */
  --display: var(--serif);           /* legal pages reference --display */
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* The fi-ligature switch, apply to any element rendering the brand voice in serif.
     Wordmark itself is ALWAYS the SVG, never live type. */
  --liga: "liga" 1, "dlig" 1, "calt" 1;

  /* ---- Type scale (fluid, editorial, generous leading) ---- */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);  /* fine print, eyebrow */
  --step-0:  clamp(1.05rem, 1.00rem + 0.25vw, 1.18rem);  /* body */
  --step-1:  clamp(1.45rem, 1.30rem + 0.7vw, 1.85rem);   /* sub-lead */
  --step-2:  clamp(2.0rem, 1.6rem + 2vw, 3.0rem);        /* h2 */
  --step-3:  clamp(2.8rem, 2.1rem + 3.4vw, 4.6rem);      /* h1 */
  --step-4:  clamp(3.8rem, 2.6rem + 6vw, 7.0rem);        /* hero display */

  /* ---- Spacing (8px base, generous editorial rhythm) ---- */
  --space-1: 0.5rem;   /* 8  */
  --space-2: 1rem;     /* 16 */
  --space-3: 1.5rem;   /* 24 */
  --space-4: 2.5rem;   /* 40 */
  --space-5: 4rem;     /* 64 */
  --space-6: 6.5rem;   /* 104, section gutters */
  --space-7: 10rem;    /* 160, hero breathing room */

  /* ---- Radii, soft, restrained. Pills for buttons, gentle on cards ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;

  /* ---- Hairline + structural ---- */
  --rule: 1px;
  --rule-strong: 1.5px;

  /* ---- Motion, quiet, golden-hour ease. No bounce. ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 600ms;
}

/* ============================================================
   Scheme classes, apply to a section/surface to switch palette.
   Never combine across schemes without intent (see Color System v1).
   ============================================================ */
.scheme-01 { --bg: var(--field-cream);    --fg: var(--field-midnight); --fg-muted: var(--field-olive);  --accent: var(--field-gold); } /* web default */
.scheme-02 { --bg: var(--field-midnight); --fg: var(--field-gold);     --fg-muted: var(--field-cream);  --accent: var(--field-gold); } /* hero / dark */
.scheme-03 { --bg: var(--field-cream);    --fg: var(--field-olive);    --fg-muted: var(--field-olive);  --accent: var(--field-gold); } /* editorial */
.scheme-04 { --bg: var(--field-forest);   --fg: var(--field-cream);    --fg-muted: var(--field-gold);   --accent: var(--field-gold); } /* nature depth */
.scheme-05 { --bg: var(--field-cream);    --fg: var(--field-ink);      --fg-muted: var(--field-ink);    --accent: var(--field-ink);  } /* legal / Rx */
.scheme-06 { --bg: var(--field-gold);     --fg: var(--field-midnight); --fg-muted: var(--field-midnight);--accent: var(--field-midnight);} /* foil accent */

/* ============================================================
   Base element styles, semantic defaults
   ============================================================ */
.field-type {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display, h1.field, h2.field, h3.field, .field-serif {
  font-family: var(--serif);
  font-feature-settings: var(--liga);
  font-weight: 400;
  letter-spacing: 0.005em;
  text-wrap: pretty;
}

.hero-display {
  font-family: var(--serif);
  font-feature-settings: var(--liga);
  font-weight: 400;
  font-size: var(--step-4);
  line-height: 1.0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1.field { font-size: var(--step-3); line-height: 1.04; letter-spacing: -0.005em; }
h2.field { font-size: var(--step-2); line-height: 1.1; }
h3.field { font-size: var(--step-1); line-height: 1.2; font-weight: 500; }

.lead {
  font-family: var(--serif);
  font-feature-settings: var(--liga);
  font-size: var(--step-1);
  line-height: 1.4;
  font-weight: 400;
}

.eyebrow {
  font-family: var(--sans);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 500;
  color: var(--fg-muted);
}

.fine-print {
  font-family: var(--sans);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--fg-muted);
}

/* ---- Buttons ---- */
.btn {
  font-family: var(--sans);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 500;
  padding: 0.95em 2.2em;
  border-radius: var(--radius-pill);
  border: var(--rule) solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.btn:active { transform: translateY(1px); }

/* Primary: Gold fill on midnight type, the "Start Consult" button */
.btn-primary { background: var(--field-gold); color: var(--field-midnight); }
.btn-primary:hover { background: var(--field-midnight); color: var(--field-gold); }

/* On dark schemes, primary inverts to gold-on-midnight already legible */
.scheme-02 .btn-primary, .scheme-04 .btn-primary { background: var(--field-gold); color: var(--field-midnight); }
.scheme-02 .btn-primary:hover, .scheme-04 .btn-primary:hover { background: var(--field-cream); color: var(--field-midnight); }

/* Secondary: outline in current fg */
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn-ghost:hover { background: var(--fg); color: var(--bg); }

/* ---- Hairline divider ---- */
.rule { height: var(--rule); background: var(--hairline); border: 0; width: 100%; }
.rule-short { width: 56px; height: var(--rule-strong); background: var(--accent); border: 0; }