/* Loving Touch design system, copied verbatim from the Claude Design project
   (_ds/loving-touch-design-system-83fda63c…/styles.css and the files it imports).
   tokens/fonts.css is left out: the Google Fonts request lives in the page <head>
   so it doesn't wait behind this file. */

/* ---- tokens/colors.css ---- */
:root{
  /* Base palette — the whole brand is these five colors. */
  --plum-900:#33192F;
  --plum:#4A2545;
  --plum-600:#5E3358;
  --plum-300:#8A6884;
  --ivory:#FAF7F2;
  --ivory-200:#F2ECE3;
  --gold:#C5A253;
  --gold-700:#9A7C36;
  --lilac:#E9E1EA;
  --lilac-300:#D8CCDA;
  --charcoal:#2B2523;
  --charcoal-600:#5A5250;

  /* Surfaces */
  --surface-page:var(--ivory);
  --surface-card:#FFFFFF;
  --surface-quiet:var(--lilac);
  --surface-inverse:var(--plum);
  --surface-inverse-deep:var(--plum-900);

  /* Text — every text style declares one of these explicitly. */
  --text-body:var(--charcoal);          /* on ivory, white, lilac */
  --text-muted:var(--charcoal-600);     /* on ivory, white */
  --text-heading:var(--plum);           /* on ivory, white, lilac */
  --text-on-plum:var(--ivory);          /* on plum */
  --text-accent-on-plum:var(--gold);    /* on plum ONLY */
  --text-link:var(--plum);
  --text-link-hover:var(--plum-900);
  --text-disabled:#8E8683;

  /* Lines & accents — gold is a line color, never a text or fill color. */
  --rule-accent:var(--gold);
  --rule-quiet:var(--lilac-300);
  --rule-strong:var(--plum);
  --border-field:#C9BFC6;
  --border-field-focus:var(--plum);

  /* Interaction */
  --focus-ring:var(--plum);
  --focus-ring-inverse:var(--gold);
  --focus-ring-width:3px;
  --focus-ring-offset:2px;

  /* Semantic (used sparingly; always paired with an icon or word, never color alone) */
  --status-ok:#2F6B4F;
  --status-warn:#8A5A16;
  --status-error:#98342B;
}

/* ---- tokens/typography.css ---- */
:root{
  --font-display:"Fraunces","Lora",Georgia,"Times New Roman",serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  /* Display / headings — Fraunces. Never all caps. */
  --type-display-size:64px;   --type-display-lh:1.08; --type-display-weight:600; --type-display-track:-0.02em;
  --type-h1-size:48px;        --type-h1-lh:1.12;      --type-h1-weight:600;      --type-h1-track:-0.015em;
  --type-h2-size:36px;        --type-h2-lh:1.18;      --type-h2-weight:600;      --type-h2-track:-0.01em;
  --type-h3-size:28px;        --type-h3-lh:1.25;      --type-h3-weight:600;      --type-h3-track:-0.005em;
  --type-h4-size:22px;        --type-h4-lh:1.3;       --type-h4-weight:600;      --type-h4-track:0;

  /* Body / UI — Inter. 18px floor. */
  --type-lead-size:22px;      --type-lead-lh:1.6;     --type-lead-weight:400;
  --type-body-size:18px;      --type-body-lh:1.6;     --type-body-weight:400;
  --type-body-lg-size:20px;   --type-body-lg-lh:1.6;  --type-body-lg-weight:400;
  --type-small-size:16px;     --type-small-lh:1.55;   --type-small-weight:400;  /* captions, legal, license line only */
  --type-label-size:18px;     --type-label-lh:1.4;    --type-label-weight:600;
  --type-button-size:18px;    --type-button-lh:1;     --type-button-weight:600;

  /* Eyebrow + logo subhead — the only all-caps styles in the system. */
  --type-eyebrow-size:14px;   --type-eyebrow-lh:1.3;  --type-eyebrow-weight:600; --type-eyebrow-track:0.18em;
}

/* ---- tokens/spacing.css ---- */
:root{
  /* 4px base, widening at the top — the large steps are the premium ones. */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;
  --space-11:160px;

  --section-y:var(--space-10);      /* vertical rhythm between page sections (desktop) */
  --section-y-compact:var(--space-9);
  --card-pad:var(--space-6);
  --container-max:1200px;
  --container-narrow:720px;
  --gutter:var(--space-6);

  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:16px;
  --radius-pill:999px;

  --tap-min:48px;                    /* hard minimum for every interactive target */
}

/* ---- tokens/elevation.css ---- */
:root{
  /* Shadows are plum-tinted and low; nothing floats far off the page. */
  --shadow-none:none;
  --shadow-sm:0 1px 2px rgba(74,37,69,.06), 0 2px 6px rgba(74,37,69,.05);
  --shadow-md:0 2px 4px rgba(74,37,69,.05), 0 8px 20px rgba(74,37,69,.07);
  --shadow-lg:0 4px 8px rgba(74,37,69,.05), 0 18px 44px rgba(74,37,69,.10);
  --shadow-inset-field:inset 0 1px 2px rgba(43,37,35,.05);
  --border-hairline:1px solid var(--rule-quiet);
  --border-accent:1px solid var(--rule-accent);
}

/* ---- tokens/motion.css ---- */
:root{
  --ease-standard:cubic-bezier(.2,.6,.2,1);
  --ease-exit:cubic-bezier(.4,0,.7,.4);
  --dur-fast:120ms;
  --dur-base:200ms;
  --dur-slow:320ms;
  --dur-reveal:520ms;
  --motion-hover:background-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
@media (prefers-reduced-motion:reduce){:root{--dur-fast:1ms;--dur-base:1ms;--dur-slow:1ms;--dur-reveal:1ms}}

/* ---- tokens/base.css ---- */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--type-body-size);line-height:var(--type-body-lh);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-heading);margin:0;text-wrap:balance}
p{margin:0;color:var(--text-body);text-wrap:pretty}
a{color:var(--text-link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--rule-accent);transition:var(--motion-hover)}
a:hover{color:var(--text-link-hover);text-decoration-color:var(--text-link-hover);text-decoration-thickness:2px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset);border-radius:var(--radius-sm)}
*,*::before,*::after{box-sizing:border-box}

/* ---- components/components.css ---- */
/* Component classes. Every rule sets an explicit color; nothing inherits. */

/* ---- Button ---- */
.lt-btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;gap:var(--space-3);min-height:var(--tap-min);min-width:var(--tap-min);padding:0 var(--space-6);border-radius:var(--radius-pill);border:1px solid transparent;font-family:var(--font-body);font-size:var(--type-button-size);font-weight:var(--type-button-weight);line-height:var(--type-button-lh);letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:var(--motion-hover),transform var(--dur-fast) var(--ease-standard)}
.lt-btn--sm{min-height:48px;padding:0 var(--space-5);font-size:16px}
.lt-btn--lg{min-height:60px;padding:0 var(--space-7);font-size:20px}
.lt-btn--primary{background:var(--plum);color:var(--ivory);border-color:var(--plum)}
.lt-btn--primary:hover{background:var(--plum-900);border-color:var(--plum-900);color:var(--ivory)}
.lt-btn--primary:active{background:var(--plum-900);transform:translateY(1px)}
.lt-btn--secondary{background:transparent;color:var(--plum);border-color:var(--plum)}
.lt-btn--secondary:hover{background:var(--lilac);color:var(--plum-900);border-color:var(--plum-900)}
.lt-btn--secondary:active{background:var(--lilac-300);transform:translateY(1px)}
.lt-btn--inverse{background:var(--ivory);color:var(--plum);border-color:var(--ivory)}
.lt-btn--inverse:hover{background:#fff;color:var(--plum-900)}
.lt-btn--inverse:active{transform:translateY(1px)}
.lt-btn--ghost{background:transparent;color:var(--plum);border-color:transparent;padding:0 var(--space-4)}
.lt-btn--ghost:hover{background:var(--lilac);color:var(--plum-900)}
.lt-btn:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}
.lt-btn--inverse:focus-visible{outline-color:var(--gold)}
.lt-btn[disabled],.lt-btn[aria-disabled="true"]{background:var(--lilac-300);color:var(--text-disabled);border-color:var(--lilac-300);cursor:not-allowed;transform:none;box-shadow:none}

/* ---- Text link ---- */
.lt-link{display:inline;color:var(--text-link);font-family:var(--font-body);font-size:inherit;font-weight:500;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:1px;text-underline-offset:4px;transition:var(--motion-hover)}
.lt-link:hover{color:var(--text-link-hover);text-decoration-color:var(--text-link-hover);text-decoration-thickness:2px}
.lt-link:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset);border-radius:var(--radius-sm)}
.lt-link--inverse{color:var(--ivory);text-decoration-color:var(--gold)}
.lt-link--inverse:hover{color:#fff;text-decoration-color:var(--gold)}
.lt-link--inverse:focus-visible{outline-color:var(--gold)}

/* ---- Eyebrow + section heading ---- */
.lt-eyebrow{display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-body);font-size:var(--type-eyebrow-size);font-weight:var(--type-eyebrow-weight);letter-spacing:var(--type-eyebrow-track);text-transform:uppercase;color:var(--plum)}
.lt-eyebrow::before{content:"";width:28px;height:1px;background:var(--gold);flex:none}
.lt-eyebrow--inverse{color:var(--gold)}

/* ---- Cards ---- */
.lt-card{background:var(--surface-card);border:1px solid var(--rule-quiet);border-radius:var(--radius-lg);padding:var(--card-pad);display:flex;flex-direction:column;gap:var(--space-4);box-shadow:var(--shadow-sm);transition:var(--motion-hover),transform var(--dur-base) var(--ease-standard)}
a.lt-card,.lt-card--interactive{text-decoration:none;cursor:pointer}
a.lt-card:hover,.lt-card--interactive:hover{box-shadow:var(--shadow-lg);border-color:var(--gold);transform:translateY(-2px)}
a.lt-card:focus-visible,.lt-card--interactive:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}
.lt-card__title{font-family:var(--font-display);font-size:var(--type-h4-size);line-height:var(--type-h4-lh);font-weight:var(--type-h4-weight);color:var(--plum);margin:0}
.lt-card__body{font-family:var(--font-body);font-size:var(--type-body-size);line-height:var(--type-body-lh);color:var(--charcoal);margin:0}
.lt-card__meta{font-family:var(--font-body);font-size:var(--type-small-size);line-height:var(--type-small-lh);color:var(--charcoal-600);margin:0}
.lt-card--quiet{background:var(--lilac);border-color:transparent;box-shadow:none}

.lt-quote{font-family:var(--font-display);font-size:22px;line-height:1.5;font-weight:400;color:var(--plum);margin:0}
.lt-photo{border-radius:var(--radius-lg);overflow:hidden;background:var(--lilac);display:block}
.lt-avatar{border-radius:var(--radius-lg);overflow:hidden;background:var(--lilac);display:flex;align-items:flex-end;justify-content:center;flex:none}
.lt-icon-frame{display:flex;align-items:center;justify-content:center;flex:none;width:56px;height:56px;border-radius:var(--radius-pill);border:1px solid var(--gold);background:transparent}

/* ---- Form fields ---- */
.lt-field{display:flex;flex-direction:column;gap:var(--space-2)}
.lt-field__label{font-family:var(--font-body);font-size:var(--type-label-size);font-weight:var(--type-label-weight);line-height:var(--type-label-lh);color:var(--charcoal)}
.lt-field__req{color:var(--plum);font-weight:600}
.lt-field__hint{font-family:var(--font-body);font-size:var(--type-small-size);line-height:var(--type-small-lh);color:var(--charcoal-600)}
.lt-field__error{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-body);font-size:var(--type-small-size);font-weight:600;line-height:var(--type-small-lh);color:var(--status-error)}
.lt-input{width:100%;min-height:var(--tap-min);padding:12px var(--space-4);background:#fff;color:var(--charcoal);font-family:var(--font-body);font-size:var(--type-body-size);line-height:var(--type-body-lh);border:1px solid var(--border-field);border-radius:var(--radius-md);box-shadow:var(--shadow-inset-field);transition:var(--motion-hover)}
textarea.lt-input{min-height:132px;resize:vertical}
.lt-input::placeholder{color:#8E8683}
.lt-input:hover{border-color:var(--plum-300)}
.lt-input:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset);border-color:var(--plum)}
.lt-input[disabled]{background:var(--ivory-200);color:var(--text-disabled);border-color:var(--lilac-300);cursor:not-allowed}
.lt-input[aria-invalid="true"]{border-color:var(--status-error);border-width:2px}

/* ---- Phone CTA ---- */
.lt-phone{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-6);background:var(--plum);border-radius:var(--radius-lg);padding:var(--space-7) var(--space-8)}
.lt-phone__label{font-family:var(--font-body);font-size:var(--type-eyebrow-size);font-weight:600;letter-spacing:var(--type-eyebrow-track);text-transform:uppercase;color:var(--gold);margin:0 0 var(--space-3)}
.lt-phone__number{display:inline-flex;align-items:center;gap:var(--space-4);font-family:var(--font-display);font-size:44px;line-height:1.1;font-weight:600;color:var(--ivory);text-decoration:none;transition:var(--motion-hover)}
.lt-phone__number:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:8px}
.lt-phone__number:focus-visible{outline:var(--focus-ring-width) solid var(--gold);outline-offset:4px;border-radius:var(--radius-sm)}
.lt-phone__sub{font-family:var(--font-body);font-size:var(--type-body-size);line-height:var(--type-body-lh);color:var(--ivory);margin:var(--space-3) 0 0;opacity:.92}

/* ---- Nav ---- */
.lt-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding:var(--space-4) var(--space-8);background:var(--ivory);border-bottom:1px solid var(--rule-quiet)}
.lt-nav--plum{background:var(--plum);border-bottom-color:rgba(197,162,83,.35)}
.lt-nav__links{display:flex;align-items:center;gap:var(--space-2);list-style:none;margin:0;padding:0}
.lt-nav__link{display:inline-flex;align-items:center;white-space:nowrap;min-height:var(--tap-min);padding:0 var(--space-4);border-radius:var(--radius-pill);font-family:var(--font-body);font-size:17px;font-weight:500;color:var(--plum);text-decoration:none;transition:var(--motion-hover)}
.lt-nav__link:hover{background:var(--lilac);color:var(--plum-900);text-decoration:none}
.lt-nav__link[aria-current="page"]{color:var(--plum-900);font-weight:600;box-shadow:inset 0 -2px 0 var(--gold)}
.lt-nav__link:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}
.lt-nav--plum .lt-nav__link{color:var(--ivory)}
.lt-nav--plum .lt-nav__link:hover{background:var(--plum-600);color:#fff}
.lt-nav--plum .lt-nav__link:focus-visible{outline-color:var(--gold)}

/* ---- Footer ---- */
.lt-footer{background:var(--plum);color:var(--ivory);padding:var(--space-9) var(--space-8) var(--space-6)}
.lt-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:var(--space-8);max-width:var(--container-max);margin:0 auto}
.lt-footer h4{font-family:var(--font-body);font-size:var(--type-eyebrow-size);font-weight:600;letter-spacing:var(--type-eyebrow-track);text-transform:uppercase;color:var(--gold);margin:0 0 var(--space-4)}
.lt-footer p,.lt-footer li{font-family:var(--font-body);font-size:17px;line-height:1.6;color:var(--ivory);margin:0}
.lt-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.lt-footer a{color:var(--ivory);text-decoration:none;display:inline-flex;align-items:center;min-height:40px}
.lt-footer a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.lt-footer a:focus-visible{outline:var(--focus-ring-width) solid var(--gold);outline-offset:var(--focus-ring-offset);border-radius:var(--radius-sm)}
.lt-footer__legal{max-width:var(--container-max);margin:var(--space-8) auto 0;padding-top:var(--space-5);border-top:1px solid rgba(197,162,83,.4);display:flex;flex-wrap:wrap;gap:var(--space-5) var(--space-7);justify-content:space-between}
.lt-footer__license{font-family:var(--font-body);font-size:var(--type-small-size);line-height:1.5;color:var(--ivory);opacity:.85;margin:0}
