/* ============================================================
   BENOIT BULLDOGS — DESIGN TOKENS
   The single source of every design decision. Components never
   hard-code a color, size, or duration — they reference these.
   Full reference: /docs/DESIGN-SYSTEM.md
   ============================================================ */

:root {

	/* ---- Color · brand ---- */
	--color-primary:        #617FC0;  /* brand blue — large accents, graphic use */
	--color-primary-hover:  #4E6AAC;  /* deep blue — links, hovers, text-size blue (AA) */
	--color-primary-active: #435C97;
	--color-accent:         #C0A261;  /* muted gold — rules, details, emphasis only */
	--color-accent-hover:   #AD8F4E;
	--color-accent-text:    #8F763F;  /* gold usable at text sizes (AA on paper) */

	/* ---- Color · text ---- */
	--color-text:           #33312E;  /* deep charcoal */
	--color-text-secondary: #6B675F;  /* warm gray deepened for AA on paper */
	--color-text-soft:      #7F7B74;  /* supplied warm gray — large text + non-text only */
	--color-text-inverse:   #F9F7F3;  /* text on charcoal grounds */
	--color-text-inverse-secondary: #B9B5AD;

	/* ---- Color · surfaces ---- */
	--color-background:     #F9F7F3;  /* warm paper — page ground */
	--color-background-alt: #F4F1EB;  /* alternating quiet sections */
	--color-surface:        #F1EEE7;  /* panels, form fields */
	--color-border:         #E2DED4;
	--color-border-strong:  #C9C4B8;
	--color-footer:         #33312E;  /* charcoal footer ground */

	/* ---- Color · feedback (forms) — always paired with words ---- */
	--color-error:          #9C4A38;
	--color-success:        #5A6E4E;

	/* ---- Typography · families ---- */
	--font-display: "Cormorant Garamond", Georgia, serif;
	--font-body:    "Manrope", -apple-system, "Segoe UI", sans-serif;
	--font-accent:  "Merienda", cursive;   /* sparing: signatures, short accents only */

	/* ---- Typography · scale (fluid, mobile → desktop) ---- */
	--text-display: clamp(2.5rem, 2rem + 3.4vw, 4.25rem);      /* hero statements */
	--text-h1:      clamp(2.25rem, 1.9rem + 2.4vw, 3.4rem);
	--text-h2:      clamp(1.75rem, 1.5rem + 1.6vw, 2.5rem);
	--text-h3:      clamp(1.4rem, 1.3rem + 0.65vw, 1.7rem);
	--text-h4:      clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
	--text-h5:      1rem;
	--text-lead:    clamp(1.125rem, 1.08rem + 0.3vw, 1.25rem);
	--text-body:    1.0625rem;
	--text-small:   0.9375rem;
	--text-caption: 0.8125rem;
	--text-label:   0.8125rem;      /* uppercase eyebrow / labels */
	--text-button:  1rem;
	--text-accent:  clamp(1.05rem, 1rem + 0.3vw, 1.2rem);      /* Merienda moments */

	/* ---- Typography · rhythm ---- */
	--leading-tight: 1.1;
	--leading-heading: 1.18;
	--leading-body: 1.7;
	--tracking-label: 0.08em;      /* the only letter-spacing in the system */

	/* ---- Spacing · 4px base ---- */
	--space-xs:  0.25rem;   /*   4 */
	--space-sm:  0.5rem;    /*   8 */
	--space-md:  1rem;      /*  16 */
	--space-lg:  1.5rem;    /*  24 */
	--space-xl:  2rem;      /*  32 */
	--space-2xl: 3rem;      /*  48 */
	--space-3xl: 4rem;      /*  64 */
	--space-4xl: 6rem;      /*  96 */

	/* Fluid section + component rhythm */
	--space-section:      clamp(4rem, 3rem + 6vw, 8rem);
	--space-section-sm:   clamp(2.5rem, 2rem + 3vw, 4.5rem);
	--space-component:    clamp(1.5rem, 1.25rem + 1.5vw, 2.5rem);
	--gap-grid:           clamp(1.25rem, 1rem + 1.5vw, 2rem);

	/* ---- Layout ---- */
	--container-max:  1200px;
	--container-wide: 1360px;
	--container-text: 720px;
	--container-pad:  clamp(1.25rem, 4vw, 3rem);   /* side padding all breakpoints */

	/* Breakpoints (reference for media queries — CSS vars can't drive them):
	   sm 640px · md 900px · lg 1200px · xl 1600px */

	/* ---- Shape ---- */
	--radius-sm: 2px;    /* buttons, inputs */
	--radius-md: 4px;    /* cards, admin chrome */
	--radius-img: 3px;   /* card imagery; full-bleed imagery uses 0 */

	/* ---- Elevation — used once: the mobile drawer ---- */
	--shadow-drawer: -12px 0 40px rgba(51, 49, 46, 0.18);

	/* ---- Motion ---- */
	--ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
	--duration-fast:   150ms;
	--duration-base:   300ms;
	--duration-reveal: 550ms;

	/* ---- Touch ---- */
	--tap-target: 44px;
}