/* ============================================
   FLOW — Spa Clinic · Design Tokens
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Raleway:wght@200;300;400;500;600;700&display=swap');
@import url('tan-mon-cheri.css');

:root {
  /* ── CORES ─────────────────────────────── */

  /* Primárias — Verdes da marca */
  --fl-green-deep:   #3C3F20;   /* verde profundo — cor-assinatura */
  --fl-green-sage:   #6B764C;   /* verde sage — secundária */
  --fl-green-light:  #A4B280;   /* verde claro — destaques */
  --fl-green-pale:   #DCE3CC;   /* verde pálido — fundos suaves */

  /* Acentos dourados */
  --fl-gold:         #CFAD4A;   /* dourado — acento */
  --fl-gold-pale:    #ECDDA5;   /* dourado pálido */

  /* Neutras — terrosas */
  --fl-cream:        #F6DFB9;   /* creme — fundo claro */
  --fl-cream-2:      #EFD9B4;   /* creme alternativo */
  --fl-cream-soft:   #FAF1E0;   /* creme suave — base institucional */
  --fl-cream-paper:  #FDF8EE;   /* creme papel — superfície */

  /* Marrons */
  --fl-brown-deep:   #3B2C21;   /* marrom escuro — texto, alternativa */
  --fl-brown-2:      #4F3B2C;   /* marrom card */
  --fl-brown-mid:    #8C7559;   /* marrom médio — texto secundário */
  --fl-stone:        #B8A88A;   /* pedra — bordas, texto suave */

  /* Semânticas */
  --fl-text-on-dark:        #F6DFB9;
  --fl-text-secondary-dark: #DCE3CC;
  --fl-text-on-light:        #3C3F20;
  --fl-text-secondary-light: #6B764C;

  /* ── TIPOGRAFIA ─────────────────────────── */
  --fl-font-display: 'Cormorant Garamond', Georgia, serif;
  --fl-font-script:  'TAN Mon Cheri', 'Allura', cursive;
  --fl-font-body:    'Raleway', 'Helvetica Neue', sans-serif;

  /* Escala */
  --fl-text-xs:    12px;
  --fl-text-sm:    14px;
  --fl-text-base:  16px;
  --fl-text-md:    18px;
  --fl-text-lg:    24px;
  --fl-text-xl:    32px;
  --fl-text-2xl:   44px;
  --fl-text-3xl:   60px;
  --fl-text-4xl:   80px;

  /* Line heights */
  --fl-leading-tight:  1.1;
  --fl-leading-snug:   1.3;
  --fl-leading-normal: 1.55;
  --fl-leading-loose:  1.8;

  /* Letter spacing */
  --fl-tracking-tight:  -0.02em;
  --fl-tracking-normal:  0em;
  --fl-tracking-wide:    0.08em;
  --fl-tracking-wider:   0.18em;
  --fl-tracking-widest:  0.28em;

  /* ── ESPAÇAMENTOS ───────────────────────── */
  --fl-space-1:   4px;
  --fl-space-2:   8px;
  --fl-space-3:   12px;
  --fl-space-4:   16px;
  --fl-space-5:   24px;
  --fl-space-6:   32px;
  --fl-space-7:   48px;
  --fl-space-8:   64px;
  --fl-space-9:   96px;
  --fl-space-10: 128px;

  /* ── BORDAS ─────────────────────────────── */
  --fl-radius-sm:   4px;
  --fl-radius-md:   8px;
  --fl-radius-lg:   16px;
  --fl-radius-xl:   24px;
  --fl-radius-full: 9999px;

  /* ── SOMBRAS ─────────────────────────────── */
  --fl-shadow-sm:  0 1px 3px rgba(60,63,32,0.12);
  --fl-shadow-md:  0 4px 16px rgba(60,63,32,0.18);
  --fl-shadow-lg:  0 8px 32px rgba(60,63,32,0.22);
  --fl-shadow-glow:0 0 40px rgba(207,173,74,0.32);

  /* ── GRID ───────────────────────────────── */
  --fl-grid-cols:   12;
  --fl-grid-gutter: 24px;
  --fl-grid-margin: 48px;
  --fl-max-width:   1280px;
}