/* Lyzen Clinic — CSS único do design system (pacote v004, 04/10/2026).
   Junta tokens/colors, typography, spacing e effects num só arquivo.
   tokens/fonts.css ficou de fora: ele importava do Google Fonts as famílias Jost e
   Quicksand, que o site não usa (o site usa Montserrat e Playfair Display, ligadas no <head>). */
/* ---- tokens/colors.css ---- */
/* ============================================================
   Lyzen Clinic — Color Tokens
   Warm, organic, spa-luxury palette. Sage greens + soft sands.
   Base palette is the brand's 2024 "novas cores":
     Matcha #869176 · Pistache #B1B294 · Chai #C7AD8A
     Vanilla #DDCFBC · Almond #F7F2ED
   ============================================================ */
:root {
  /* ---- Brand core (named, from the manual) ---- */
  --matcha:   #869176;  /* primary deep sage  */
  --pistache: #B1B294;  /* soft light sage    */
  --chai:     #C7AD8A;  /* warm caramel gold  */
  --vanilla:  #DDCFBC;  /* pale sand          */
  --almond:   #F7F2ED;  /* cream / paper      */

  /* ---- Sage (green) scale ---- */
  --green-50:  #F0F2EC;
  --green-100: #E3E7DA;
  --green-200: #CFD5BF;
  --green-300: #B1B294;  /* pistache */
  --green-400: #9AA383;
  --green-500: #869176;  /* matcha */
  --green-600: #6E7860;
  --green-700: #59624E;
  --green-800: #444B3C;
  --green-900: #32382C;

  /* ---- Sand (warm neutral) scale ---- */
  --sand-50:  #FBF8F3;
  --sand-100: #F7F2ED;  /* almond */
  --sand-200: #EFE6D8;
  --sand-300: #DDCFBC;  /* vanilla */
  --sand-400: #D0BB9D;
  --sand-500: #C7AD8A;  /* chai */
  --sand-600: #B0946C;
  --sand-700: #8F7654;
  --sand-800: #695843;
  --sand-900: #463A2C;

  /* ---- Warm neutral / ink ---- */
  --white:     #FFFFFF;
  --ink:       #2E2A24;  /* warm near-black, body text */
  --ink-soft:  #57514766;
  --ink-700:   #4A443B;
  --ink-500:   #7A7367;  /* muted text */
  --ink-300:   #A79F92;  /* faint text / placeholders */

  /* ============================================================
     SEMANTIC ALIASES — reach for these in components
     ============================================================ */

  /* Surfaces */
  --surface-page:     var(--almond);
  --surface-card:     var(--white);
  --surface-soft:     var(--sand-50);
  --surface-sunken:   var(--sand-100);
  --surface-muted:    var(--sand-200);
  --surface-inverse:  var(--matcha);
  --surface-inverse-deep: var(--green-700);

  /* Text */
  --text-primary:   var(--ink);
  --text-secondary: var(--ink-500);
  --text-faint:     var(--ink-300);
  --text-on-dark:   var(--almond);
  --text-on-brand:  var(--almond);
  --text-brand:     var(--green-600);

  /* Brand actions */
  --brand:          var(--matcha);
  --brand-hover:    var(--green-600);
  --brand-active:   var(--green-700);
  --brand-subtle:   var(--green-50);
  --brand-subtle-text: var(--green-700);

  --accent:         var(--chai);
  --accent-hover:   var(--sand-600);
  --accent-active:  var(--sand-700);
  --accent-subtle:  var(--sand-100);

  /* Lines & borders */
  --border:         #EAE1D4;
  --border-strong:  var(--vanilla);
  --border-brand:   color-mix(in srgb, var(--matcha) 35%, transparent);
  --divider:        #EFE7DA;

  /* Focus ring */
  --ring:           color-mix(in srgb, var(--matcha) 45%, transparent);

  /* Status (kept inside the warm/organic family) */
  --success:        #6E7860;
  --success-subtle: #EBEFE3;
  --warning:        #C08A3E;
  --warning-subtle: #F6EBD8;
  --danger:         #B06A5A;
  --danger-subtle:  #F4E2DC;
  --info:           #7E8B93;
  --info-subtle:    #E9EEF0;
}

/* ---- tokens/typography.css ---- */
/* ============================================================
   Lyzen Clinic — Typography Tokens
   Three voices:
     · Display serif  (Playfair Display) — wordmark & headlines
     · Label sans     (Jost)               — uppercase eyebrows, UI
     · Body sans      (Quicksand)          — running copy
   ============================================================ */
:root {
  /* Families */
  --font-display: "Playfair Display", "Times New Roman", serif;
  --font-label:   "Jost", "Century Gothic", system-ui, sans-serif;
  --font-body:    "Quicksand", system-ui, -apple-system, sans-serif;

  /* Weights */
  --fw-light:    300; /* @kind font */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */

  /* Fluid type scale (display uses serif, rest body/label) */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.375rem;  /* 22 */
  --text-xl:   1.75rem;   /* 28 */
  --text-2xl:  2.25rem;   /* 36 */
  --text-3xl:  3rem;      /* 48 */
  --text-4xl:  4rem;      /* 64 */
  --text-5xl:  5.5rem;    /* 88 */

  /* Line heights */
  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* Letter spacing — the brand leans on WIDE tracking for labels */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.18em;   /* eyebrow labels / tagline */
  --tracking-widest: 0.30em;   /* badge "estética avançada" */
}

/* ---- Optional helper classes (cards/specimens use these) ---- */
.lz-display {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.lz-eyebrow {
  font-family: var(--font-label);
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.lz-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
}

/* ---- tokens/spacing.css ---- */
/* ============================================================
   Lyzen Clinic — Spacing & Radius Tokens
   8px base rhythm. Generous, airy spacing to match the
   minimal spa aesthetic.
   ============================================================ */
:root {
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  2.5rem;   /* 40 */
  --space-8:  3rem;     /* 48 */
  --space-9:  4rem;     /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-12: 7rem;     /* 112 */

  /* Corner radii — soft, rounded, never sharp */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   28px;
  --radius-2xl:  40px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Container widths */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1320px;
}

/* ---- tokens/effects.css ---- */
/* ============================================================
   Lyzen Clinic — Effects: shadows, blur, motion
   Shadows are soft, warm-tinted and low-contrast — the brand
   reads light and weightless, never heavy or techy.
   ============================================================ */
:root {
  /* Elevation — warm shadow color, generous blur, tight spread */
  --shadow-xs: 0 1px 2px rgba(70, 58, 44, 0.06);
  --shadow-sm: 0 2px 8px rgba(70, 58, 44, 0.07);
  --shadow-md: 0 8px 24px rgba(70, 58, 44, 0.09);
  --shadow-lg: 0 18px 44px rgba(70, 58, 44, 0.12);
  --shadow-xl: 0 30px 70px rgba(70, 58, 44, 0.16);

  /* Inset for sunken fields */
  --shadow-inset: inset 0 1px 2px rgba(70, 58, 44, 0.06);

  /* Focus */
  --shadow-focus: 0 0 0 3px var(--ring);

  /* Glass / overlay blur */
  --blur-sm: 6px;  /* @kind other */
  --blur-md: 14px; /* @kind other */
  --blur-lg: 28px; /* @kind other */

  /* Motion — gentle, organic easing; no bounce */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1);    /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   240ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */

  /* Repeating brand pattern (lotus emblem tile) */
  --pattern-matcha: url("assets/patterns/pattern-matcha.png"); /* @kind other */
  --pattern-white:  url("assets/patterns/pattern-white.png");  /* @kind other */
}