/* ============================================================
   Giorgio Hair Salon — Design tokens
   Built from the brand colors (#353841 / #D46701 / #FFFFFF)
   plus a balanced, warm-neutral, unisex palette.
   ============================================================ */

:root {
	/* Brand */
	--g-charcoal:        #353841;
	--g-charcoal-deep:   #2B2D35;
	--g-charcoal-soft:   #3F434E;
	--g-orange:          #D46701;
	--g-orange-hover:    #B5560A;
	--g-orange-soft:     #FBEAD9;
	--g-white:           #FFFFFF;

	/* Neutrals (warm gray) */
	--g-bg:              #FFFFFF;
	--g-bg-alt:          #F6F5F3;
	--g-bg-muted:        #ECEAE6;
	--g-card:            #FFFFFF;
	--g-border:          #E4E2DD;
	--g-border-strong:   #CFCCC5;

	/* Text */
	--g-text:            #2B2D35;
	--g-text-muted:      #6B6F76;
	--g-text-on-dark:    rgba(255, 255, 255, 0.92);
	--g-muted-on-dark:   rgba(255, 255, 255, 0.62);

	/* Form states */
	--g-success:         #2E7D5B;
	--g-error:           #C2402E;

	/* Typography */
	--g-font-body:       "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--g-font-display:    "Fraunces", Georgia, "Times New Roman", serif;

	--g-fs-eyebrow:      0.78rem;
	--g-fs-sm:           0.875rem;
	--g-fs-base:         1rem;
	--g-fs-lg:           1.125rem;
	--g-fs-xl:           clamp(1.15rem, 1.6vw, 1.35rem);
	--g-fs-h3:           clamp(1.3rem, 2.2vw, 1.6rem);
	--g-fs-h2:           clamp(1.75rem, 3.6vw, 2.6rem);
	--g-fs-h1:           clamp(2.25rem, 5.4vw, 3.75rem);

	--g-lh-body:         1.65;
	--g-lh-head:         1.12;
	--g-ls-head:         -0.012em;
	--g-ls-eyebrow:      0.18em;

	/* Spacing (8px base) */
	--g-sp-1:            0.5rem;
	--g-sp-2:            1rem;
	--g-sp-3:            1.5rem;
	--g-sp-4:            2rem;
	--g-sp-5:            3rem;
	--g-sp-6:            4rem;
	--g-sp-7:            6rem;
	--g-section-y:       clamp(3.25rem, 7vw, 6rem);

	/* Radius */
	--g-radius-sm:       8px;
	--g-radius:          14px;
	--g-radius-lg:       22px;
	--g-radius-pill:     999px;

	/* Shadows */
	--g-shadow-sm:       0 1px 2px rgba(53, 56, 65, 0.06), 0 1px 3px rgba(53, 56, 65, 0.05);
	--g-shadow:          0 8px 28px rgba(53, 56, 65, 0.09);
	--g-shadow-lg:       0 22px 56px rgba(53, 56, 65, 0.14);

	/* Layout */
	--g-container:       1600px;
	--g-container-narrow: 760px;
	--g-gutter:          clamp(1.15rem, 4vw, 2.25rem);
	--g-transition:      200ms ease;
}