/* Marie-Fleur design tokens — bundled for standalone site export */

/* ===== tokens/fonts.css ===== */
/* Webfonts — Marie-Fleur
   Title font: Montserrat — the closest free geometric-humanist match to the
   licensed Avenir LT of the brief, whose files were never provided.
   Body font: Questrial (Google Fonts — exact match to the brief). */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Questrial&family=Marcellus+SC&display=swap");

/* ===== tokens/colors.css ===== */
/* Colors — Institut Secrets de Beauté Marie-Fleur
   Warm, botanical, feminine wellness palette built around the leafy
   green yin-yang logo. Five brand anchors (brief): leaf green, soft rose,
   white, mocha taupe, warm sand — extended into tint/shade ramps. */

:root {
  /* ---- Brand anchors (exact brief values) ---- */
  --mf-green: #7e9e33;   /* botanical leaf — signature */
  --mf-rose:  #f9b6c2;   /* soft rose — feminine accent */
  --mf-taupe: #a7917c;   /* mocha taupe — warm neutral / secondary text */
  --mf-sand:  #d2c8be;   /* warm sand — surfaces & dividers */
  --mf-white: #ffffff;

  /* ---- Leaf green ramp ---- */
  --green-50:  #f3f6ea;
  --green-100: #e3ebcd;
  --green-200: #cad99f;
  --green-300: #aec472;
  --green-400: #93ad4d;
  --green-500: #7e9e33;  /* = --mf-green */
  --green-600: #687f29;
  --green-700: #4f6020;  /* deep — text on light, hover ink */
  --green-800: #3a461a;

  /* ---- Soft rose ramp ---- */
  --rose-50:  #fef4f6;
  --rose-100: #fde7eb;
  --rose-200: #fbcdd6;
  --rose-300: #f9b6c2;   /* = --mf-rose */
  --rose-400: #f292a4;
  --rose-500: #e36f86;
  --rose-600: #c8536c;   /* accessible rose for text/borders */

  /* ---- Taupe / mocha ramp ---- */
  --taupe-100: #ece5dd;
  --taupe-200: #d8cabb;
  --taupe-300: #c2ad99;
  --taupe-400: #a7917c;  /* = --mf-taupe */
  --taupe-500: #8d7763;
  --taupe-600: #6f5c4a;
  --taupe-700: #4d3f31;

  /* ---- Sand / warm neutrals ---- */
  --sand-50:  #faf7f3;   /* page cream */
  --sand-100: #f4efe8;
  --sand-200: #e8e0d6;
  --sand-300: #d2c8be;   /* = --mf-sand */
  --sand-400: #b9ad9f;

  /* ---- Warm ink (from the bronze hero) ---- */
  --ink-900: #2e271f;
  --ink-700: #3a322b;
  --bronze:  #5a4632;    /* hero background tone */

  /* ---------- Semantic aliases ---------- */
  --color-bg:            var(--sand-50);
  --color-surface:       var(--mf-white);
  --color-surface-alt:   var(--sand-100);
  --color-surface-sunken:var(--sand-200);
  --color-surface-dark:  var(--bronze);

  --text-primary:        var(--ink-700);
  --text-secondary:      var(--taupe-500);
  --text-muted:          var(--taupe-400);
  --text-on-dark:        var(--sand-50);
  --text-on-brand:       var(--mf-white);
  --text-brand:          var(--green-700);

  --brand-primary:       var(--mf-green);
  --brand-primary-hover: var(--green-600);
  --brand-primary-press: var(--green-700);
  --brand-accent:        var(--mf-rose);
  --brand-accent-hover:  var(--rose-400);

  --border-subtle:       var(--sand-200);
  --border-default:      var(--sand-300);
  --border-strong:       var(--taupe-300);

  --focus-ring:          var(--green-400);

  /* status — kept warm/soft to match the brand */
  --success: var(--green-600);
  --error:   #c0573f;
  --info:    var(--taupe-500);
}


/* ===== tokens/typography.css ===== */
/* Typography — Marie-Fleur
   Titles: Montserrat — geometric, airy, generous letter-spacing in
   uppercase, light weights for elegance.
   Body: Questrial — single-weight humanist sans, calm and clean.
   Accent: Marcellus SC — occasional refined small-caps serif for labels. */

:root {
  --font-title:  "Montserrat", system-ui, sans-serif;
  --font-body:   "Questrial", system-ui, sans-serif;
  --font-accent: "Marcellus SC", Georgia, serif;

  /* Type scale (1.25 major-third-ish, tuned for editorial spa feel) */
  --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 */

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

  --weight-light:  300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;
  --weight-bold:   700;

  /* Marie-Fleur signature: uppercase titles ride on wide tracking */
  --tracking-title:  0.14em;
  --tracking-label:  0.22em;
  --tracking-body:   0.005em;

  /* Semantic roles */
  --title-font:   var(--font-title);
  --title-weight: var(--weight-light);
  --title-track:  var(--tracking-title);

  --label-font:   var(--font-title);
  --label-weight: var(--weight-semi);
  --label-track:  var(--tracking-label);

  --body-font:    var(--font-body);
  --body-leading: var(--leading-normal);
}


/* ===== tokens/spacing.css ===== */
/* Spacing & layout — Marie-Fleur. 4px base grid, generous and airy. */

: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:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 */

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 760px;
  --section-y: var(--space-9);
  --gutter: var(--space-5);
}


/* ===== tokens/effects.css ===== */
/* Effects — radii, shadows, borders, motion. Marie-Fleur
   Soft, calm, cocooning: gentle radii, diffuse warm shadows, slow fades.
   No harsh drop-shadows, no bounce. */

:root {
  /* Corner radii — soft, never sharp */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* Shadows — warm-tinted, low and diffuse (cast in taupe, not black) */
  --shadow-xs: 0 1px 2px rgba(77, 63, 49, 0.06);
  --shadow-sm: 0 2px 8px rgba(77, 63, 49, 0.08);
  --shadow-md: 0 8px 24px rgba(77, 63, 49, 0.10);
  --shadow-lg: 0 18px 48px rgba(77, 63, 49, 0.14);
  --shadow-focus: 0 0 0 3px rgba(147, 173, 77, 0.35);

  /* Borders */
  --border-width: 1px;
  --border-hairline: 1px solid var(--border-subtle);

  /* Motion — slow, soft, no overshoot */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --ease-inout: cubic-bezier(0.45, 0, 0.55, 1);      /* @kind other */
  --duration-fast: 140ms;                            /* @kind other */
  --duration-base: 240ms;                            /* @kind other */
  --duration-slow: 420ms;                            /* @kind other */

  /* Hover/press conventions (documented in readme) */
  --press-scale: 0.98;                               /* @kind other */
}