/* ============================================================
   Fratelli House — Colors & Type
   Source of truth for the brand's visual foundations.
   Mirrors tailwind.config.js + global.css from the production
   site (dantelopesbr/Fratelli-House).
   ============================================================ */

/* ---- Webfonts ---- */
/* Brand-owned: FRATELLI custom typeface (self-hosted in /fonts) */
@font-face {
  font-family: "Fratelli";
  src: url("fonts/FRATELLI-Thin.woff2") format("woff2"),
       url("fonts/FRATELLI-Thin.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fratelli";
  src: url("fonts/FRATELLI-ThinItalic.woff2") format("woff2"),
       url("fonts/FRATELLI-ThinItalic.woff") format("woff");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Fratelli";
  src: url("fonts/FRATELLI-Medium.woff2") format("woff2"),
       url("fonts/FRATELLI-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fratelli";
  src: url("fonts/FRATELLI-SemiBold.woff2") format("woff2"),
       url("fonts/FRATELLI-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fratelli";
  src: url("fonts/FRATELLI-BoldItalic.woff2") format("woff2"),
       url("fonts/FRATELLI-BoldItalic.woff") format("woff"),
       url("fonts/FRATELLI-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Inter (body) + Cormorant Garamond (editorial accent) — Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,400;1,500&display=swap");

:root {
  /* ============================================================
     COLOR TOKENS — primitive
     ============================================================ */

  /* Brand greens — the eucalyptus / sage signature */
  --fh-dark-green:        #7D9C96;   /* primary brand green */
  --fh-light-green:       #B4C4C1;   /* hover / highlight green */
  --fh-deep-green:        #5C746F;   /* darker hover state */

  /* Brand neutrals — graphite + nude */
  --fh-dark-gray:         #2C363D;   /* graphite, used as text + dark surface */
  --fh-nude:              #F8F5F2;   /* nude, the off-white background */
  --fh-white:             #FFFFFF;
  --fh-off-white:         #FAFAF8;

  /* Stone & wood (extracted from product photography palette) */
  --fh-stone:             #C9BFB4;
  --fh-warm-sand:         #E6DCCF;
  --fh-walnut:            #5B463A;

  /* ============================================================
     SEMANTIC TOKENS — what to actually reference
     ============================================================ */

  /* Surfaces */
  --bg-canvas:            var(--fh-nude);     /* default page bg */
  --bg-elevated:          var(--fh-white);    /* cards, white sections */
  --bg-inverse:           var(--fh-dark-gray);/* dark CTA sections, footer */
  --bg-tint:              color-mix(in srgb, var(--fh-light-green) 20%, transparent);

  /* Foreground / text */
  --fg-primary:           var(--fh-dark-gray);
  --fg-secondary:         color-mix(in srgb, var(--fh-dark-gray) 60%, transparent);
  --fg-muted:             color-mix(in srgb, var(--fh-dark-gray) 40%, transparent);
  --fg-on-inverse:        var(--fh-white);
  --fg-on-inverse-muted:  color-mix(in srgb, var(--fh-white) 40%, transparent);
  --fg-accent:            var(--fh-dark-green);

  /* Borders & rules */
  --border-hairline:      color-mix(in srgb, var(--fh-dark-green) 10%, transparent);
  --border-soft:          color-mix(in srgb, var(--fh-dark-green) 20%, transparent);
  --border-on-inverse:    color-mix(in srgb, var(--fh-white) 10%, transparent);

  /* Action / accent */
  --accent:               var(--fh-dark-green);
  --accent-hover:         var(--fh-light-green);
  --accent-press:         var(--fh-deep-green);

  /* ============================================================
     TYPE TOKENS
     ============================================================ */

  --font-display:         "Fratelli", "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-sans:            "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-serif:           "Cormorant Garamond", "Times New Roman", serif; /* editorial accent */

  /* The signature brand expression: tiny, all-caps, wide-tracked
     Montserrat. Sizes are absolute because they're often unusually
     small (8–12px) — line-height 1 because they're chrome, not body. */
  --type-eyebrow-xs-size:    8px;
  --type-eyebrow-xs-track:   0.3em;
  --type-eyebrow-sm-size:    9px;
  --type-eyebrow-sm-track:   0.4em;
  --type-eyebrow-md-size:    10px;
  --type-eyebrow-md-track:   0.4em;
  --type-eyebrow-lg-size:    12px;
  --type-eyebrow-lg-track:   0.3em;

  /* Display — Montserrat light/medium, very large, tight tracking */
  --type-h1-size:         clamp(48px, 9vw, 160px);
  --type-h1-leading:      0.9;
  --type-h1-track:        -0.02em;
  --type-h1-weight:       500;       /* category hero is medium */

  --type-h2-size:         clamp(32px, 5vw, 72px);
  --type-h2-leading:      1.05;
  --type-h2-track:        -0.01em;
  --type-h2-weight:       500;

  --type-h3-size:         clamp(20px, 2vw, 28px);
  --type-h3-leading:      1.2;
  --type-h3-track:        0.04em;    /* tracked uppercase
                                        (xl product titles) */
  --type-h3-weight:       300;

  /* Body — Inter, light-weight is the dominant weight */
  --type-body-size:       18px;
  --type-body-leading:    1.65;
  --type-body-weight:     300;

  --type-body-lg-size:    20px;
  --type-body-lg-leading: 1.65;

  --type-body-sm-size:    14px;
  --type-body-sm-leading: 1.5;

  /* Caption / utility */
  --type-caption-size:    12px;
  --type-caption-leading: 1.4;

  /* ============================================================
     SPACING & STRUCTURE
     The site uses Tailwind's default 4px scale. Sections are big.
     ============================================================ */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-6:   24px;
  --space-8:   32px;
  --space-12:  48px;
  --space-16:  64px;
  --space-24:  96px;
  --space-32:  128px;     /* py-32 = signature section padding */
  --space-48:  192px;     /* py-48 = monumental category sections */

  --radius-none:  0px;     /* signature: corners are sharp */
  --radius-pill:  9999px;  /* only used for round avatars */

  --container-max:    1280px;   /* max-w-7xl */
  --container-wide:   1800px;   /* navbar */

  /* ============================================================
     SHADOW & ELEVATION
     ============================================================ */
  --shadow-card:  0 10px 25px -10px rgba(44,54,61,0.18);
  --shadow-lg:    0 25px 50px -12px rgba(44,54,61,0.25);
  --shadow-xl:    0 40px 80px -20px rgba(44,54,61,0.10);
  --shadow-2xl:   0 50px 100px -20px rgba(0,0,0,0.45);
  --shadow-photo: 0 50px 100px -20px rgba(0,0,0,0.8); /* dramatic frame on dark sections */

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-soft:     cubic-bezier(.22,.61,.36,1);
  --dur-fast:      200ms;
  --dur-base:      400ms;
  --dur-slow:      800ms;       /* reveal-on-scroll */
  --dur-photo:     1000ms;      /* slow image scale on hover */
}

/* ============================================================
   Semantic helpers — use these in HTML directly.
   ============================================================ */

html, body {
  background: var(--bg-canvas);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-weight: var(--type-body-weight);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 300; }

h1 {
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-leading);
  letter-spacing: var(--type-h1-track);
  font-weight: var(--type-h1-weight);
  text-transform: uppercase;
}

h2 {
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-leading);
  letter-spacing: var(--type-h2-track);
  font-weight: var(--type-h2-weight);
  text-transform: uppercase;
}

h3 {
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-leading);
  letter-spacing: var(--type-h3-track);
  font-weight: var(--type-h3-weight);
  text-transform: uppercase;
}

p { color: var(--fg-secondary); }

/* Eyebrow — the most distinctive Fratelli text style.
   Tiny, uppercase, hugely tracked, Montserrat bold, in brand green. */
.fh-eyebrow {
  font-family: var(--font-display);
  font-size: var(--type-eyebrow-md-size);
  letter-spacing: var(--type-eyebrow-md-track);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fg-accent);
  display: inline-block;
}
.fh-eyebrow-xs { font-size: var(--type-eyebrow-xs-size); letter-spacing: var(--type-eyebrow-xs-track); }
.fh-eyebrow-sm { font-size: var(--type-eyebrow-sm-size); letter-spacing: var(--type-eyebrow-sm-track); }
.fh-eyebrow-lg { font-size: var(--type-eyebrow-lg-size); letter-spacing: var(--type-eyebrow-lg-track); }

/* Italic editorial accent — the brand uses italic medium green
   to pull a single phrase out of a headline. */
.fh-accent-italic {
  font-style: italic;
  font-weight: 500;
  color: var(--fg-accent);
}

/* The button — sharp-cornered, wide-tracked microtype, never rounded. */
.fh-btn {
  display: inline-block;
  background: var(--accent);
  color: var(--fh-white);
  padding: 16px 40px;
  font-family: var(--font-display);
  font-size: var(--type-eyebrow-md-size);
  letter-spacing: var(--type-eyebrow-md-track);
  text-transform: uppercase;
  font-weight: 500;
  border-radius: var(--radius-none);
  border: 0;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-soft),
              color var(--dur-base) var(--ease-soft);
  text-decoration: none;
  box-shadow: var(--shadow-2xl);
}
.fh-btn:hover { background: var(--accent-hover); color: var(--fh-dark-gray); }
.fh-btn--dark { background: var(--bg-inverse); }
.fh-btn--dark:hover { background: var(--accent); color: var(--fh-white); }
.fh-btn--ghost {
  background: transparent;
  color: var(--fg-accent);
  box-shadow: none;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-soft);
}
.fh-btn--ghost:hover { color: var(--fg-primary); border-bottom-color: var(--fg-accent); }

/* Image treatment — the brand desaturates photography ~10–20%. */
.fh-photo { filter: grayscale(0.10); }
.fh-photo--muted { filter: grayscale(0.20) brightness(0.9); }