/* =========================================================================
   A Shade Above — Colors, Typography & Foundation Tokens
   ========================================================================= */

/* --------- @font-face — Ivar Display, Ivar Text, TT Norms Pro --------- */

@font-face {
  font-family: "Ivar Display";
  src: url("fonts/IvarDisplay-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Ivar Display";
  src: url("fonts/IvarDisplay-Italic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Ivar Display";
  src: url("fonts/IvarDisplay-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Ivar Display";
  src: url("fonts/IvarDisplay-MediumItalic.otf") format("opentype");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Ivar Display";
  src: url("fonts/IvarDisplay-SemiBold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Ivar Display";
  src: url("fonts/IvarDisplay-SemiBoldItalic.otf") format("opentype");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Ivar Display";
  src: url("fonts/IvarDisplay-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Ivar Display";
  src: url("fonts/IvarDisplay-BoldItalic.otf") format("opentype");
  font-weight: 700; font-style: italic; font-display: swap;
}

@font-face {
  font-family: "Ivar Text";
  src: url("fonts/IvarText-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Ivar Text";
  src: url("fonts/IvarText-Italic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Ivar Text";
  src: url("fonts/IvarText-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Ivar Text";
  src: url("fonts/IvarText-SemiBold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Ivar Text";
  src: url("fonts/IvarText-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}

@font-face {
  font-family: "TT Norms Pro";
  src: url("fonts/TTNormsPro-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "TT Norms Pro";
  src: url("fonts/TTNormsPro-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "TT Norms Pro";
  src: url("fonts/TTNormsPro-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "TT Norms Pro";
  src: url("fonts/TTNormsPro-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

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

:root {
  /* ---- Brand colors (from Colors.docx + dieline ads) ---- */
  --asa-navy:           #1B3A57;   /* WEB navy — primary surface, headers */
  --asa-navy-print:     #192946;   /* PRINT navy — slightly bluer; print only */
  --asa-white:          #ffffff;
  --asa-off-white:      #fbf8f3;   /* near-white with a hint of warmth — default page bg */
  --asa-cream:          #edd2b6;   /* hospitality accent — sale bands, dividers */

  /* ---- Extended neutrals (derived, restrained) ---- */
  --asa-stone-100:      #faf6f0;
  --asa-stone-200:      #ece5d9;
  --asa-stone-300:      #c8bfb1;
  --asa-stone-500:      #7e7567;
  --asa-stone-700:      #3f3a32;

  /* ---- Subbrand & partner accents (use sparingly) ---- */
  --asa-coastal-blue:   #1ea2d8;   /* ASA Coastal — North Myrtle Beach; mid-blue band on MagnaTrack */
  --asa-hd-orange:      #f2a900;   /* Hunter Douglas partner mark only */

  /* ---- Semantic surface ---- */
  --bg:                 var(--asa-off-white);
  --bg-elevated:        var(--asa-white);
  --bg-inverse:         var(--asa-navy);
  --bg-band:            var(--asa-cream);

  /* ---- Foreground ---- */
  --fg-1:               var(--asa-navy);     /* primary text */
  --fg-2:               #3f3a32;             /* secondary, body */
  --fg-3:               #7e7567;             /* muted, captions, legal */
  --fg-on-navy:         var(--asa-white);
  --fg-on-cream:        var(--asa-navy);
  --fg-link:            var(--asa-navy);

  /* ---- Borders & rules ---- */
  --rule-on-navy:       rgba(243, 237, 228, 0.45);  /* the cream hairline used on navy banners */
  --rule-on-light:      rgba(27, 58, 87, 0.18);
  --hairline:           1px;

  /* ---- Spacing (8px-anchored, with print-friendly half-step) ---- */
  --s-0:                0;
  --s-1:                4px;
  --s-2:                8px;
  --s-3:                12px;
  --s-4:                16px;
  --s-5:                24px;
  --s-6:                32px;
  --s-7:                48px;
  --s-8:                64px;
  --s-9:                96px;
  --s-10:               128px;

  /* ---- Radii — restrained. Buttons rectangular, photos squared, only pills round. ---- */
  --r-0:                0;
  --r-sm:               2px;
  --r-md:               4px;
  --r-lg:               8px;
  --r-pill:             999px;

  /* ---- Shadows — minimal; brand uses paper/photography, not floating UI ---- */
  --shadow-card:        0 1px 2px rgba(27,58,87,0.08), 0 8px 24px -12px rgba(27,58,87,0.18);
  --shadow-hover:       0 2px 4px rgba(27,58,87,0.10), 0 18px 36px -14px rgba(27,58,87,0.22);
  --shadow-inset-rule:  inset 0 -1px 0 rgba(27,58,87,0.12);

  /* ---- Tracking (the brand leans on heavily-tracked caps for sans display) ---- */
  --tr-tight:           -0.01em;
  --tr-0:               0;
  --tr-2:               0.04em;
  --tr-3:               0.08em;
  --tr-4:               0.14em;   /* eyebrow caps, used everywhere */
  --tr-5:               0.22em;   /* "S H A D E S | S H U T T E R S | B L I N D S" rule */

  /* ---- Type families ----
     Merriweather (headlines) + Source Serif 4 (body, when serif is wanted)
     + Source Sans 3 (UI, eyebrows, CTAs). All open-web, royalty-free.
     Optimized for screen readability — important since older eyes are the
     ones squinting at this on a phone. */
  --ff-display:         Georgia, "Times New Roman", serif;
  --ff-text:            Georgia, "Times New Roman", serif;
  --ff-sans:            system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* ---- Type scale (anchored on 16px body, 1.25 modular for body / display set by hand) ---- */
  --fs-eyebrow:         12px;
  --fs-caption:         13px;
  --fs-body:            16px;
  --fs-body-lg:         18px;
  --fs-lead:            22px;
  --fs-h6:              16px;
  --fs-h5:              20px;
  --fs-h4:              28px;
  --fs-h3:              36px;
  --fs-h2:              52px;
  --fs-h1:              72px;
  --fs-display:         108px;

  --lh-tight:           1.05;
  --lh-snug:            1.18;
  --lh-normal:          1.45;
  --lh-loose:           1.65;

  /* ---- Layout ---- */
  --container:          1200px;
  --gutter:             24px;
}

/* ============== Semantic primitives ============== */
/* Use these as drop-in classes on elements; they are the canonical brand voice. */

.asa-eyebrow {
  font-family: var(--ff-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tr-4);
  text-transform: uppercase;
  color: var(--fg-2);
}

.asa-rule-eyebrow {
  /* Eyebrow flanked by short hairlines: — SPRING SALE — */
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--ff-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tr-5);
  text-transform: uppercase;
}
.asa-rule-eyebrow::before, .asa-rule-eyebrow::after {
  content: ""; height: 1px; width: 28px; background: currentColor; opacity: 0.7;
}

.asa-display {
  font-family: var(--ff-display);
  font-style: italic;            /* signature: italic Ivar for promo headlines */
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

.asa-h1 {
  font-family: var(--ff-display);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

.asa-h2 {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  color: var(--fg-1);
}

.asa-h3 {
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--fg-1);
}

.asa-h4 {
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.asa-h5 {
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: var(--fs-h5);
  letter-spacing: var(--tr-3);
  text-transform: uppercase;
  color: var(--fg-1);
}

.asa-h6 {
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: var(--fs-h6);
  letter-spacing: var(--tr-4);
  text-transform: uppercase;
  color: var(--fg-1);
}

.asa-lead {
  font-family: var(--ff-text);
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.asa-body {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}

.asa-caption {
  font-family: var(--ff-sans);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.asa-legal {
  font-family: var(--ff-sans);
  font-size: 11px;
  line-height: 1.4;
  color: var(--fg-3);
}

/* category list — "S H U T T E R S | S H A D E S | B L I N D S" */
.asa-categorybar {
  font-family: var(--ff-sans);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: var(--tr-5);
  text-transform: uppercase;
}
.asa-categorybar > * + *::before {
  content: "|"; margin: 0 14px; opacity: 0.4;
}

/* Buttons — squared rectangles, no shadow, capped tracking */
.asa-btn {
  display: inline-block;
  padding: 14px 22px;
  font-family: var(--ff-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--tr-4);
  text-transform: uppercase;
  border: 1px solid var(--asa-navy);
  background: var(--asa-navy);
  color: var(--asa-white);
  text-decoration: none;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
.asa-btn:hover  { background: transparent; color: var(--asa-navy); }
.asa-btn:active { transform: translateY(1px); }

.asa-btn--ghost {
  background: transparent;
  color: var(--asa-navy);
}
.asa-btn--ghost:hover { background: var(--asa-navy); color: var(--asa-white); }

.asa-btn--inverse {
  background: var(--asa-white);
  color: var(--asa-navy);
  border-color: var(--asa-white);
}
.asa-btn--inverse:hover { background: transparent; color: var(--asa-white); }

/* Page primitives */
html, body { background: var(--bg); color: var(--fg-1); }
body { font-family: var(--ff-sans); font-size: var(--fs-body); line-height: var(--lh-loose); }