/* ============================================================
   ALCO VISUALS — Colors & Type
   Warm, upbeat, editorial. Built around a punchy yellow accent
   and a near-black stage. Condensed display + clean humanist body.
   ============================================================ */

/* Webfonts — Barlow Condensed (display, local), DM Sans (body), JetBrains Mono (mono) */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..800;1,9..40,300..700&family=JetBrains+Mono:ital,wght@0,400..700;1,400..700&display=swap');

@font-face { font-family: "Barlow Condensed"; src: url("fonts/BarlowCondensed-Thin.ttf") format("truetype");        font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/BarlowCondensed-ExtraLight.ttf") format("truetype");  font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/BarlowCondensed-Light.ttf") format("truetype");       font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/BarlowCondensed-Regular.ttf") format("truetype");     font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/BarlowCondensed-Medium.ttf") format("truetype");      font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/BarlowCondensed-SemiBold.ttf") format("truetype");    font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/BarlowCondensed-Bold.ttf") format("truetype");        font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/BarlowCondensed-ExtraBold.ttf") format("truetype");   font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/BarlowCondensed-Black.ttf") format("truetype");       font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/BarlowCondensed-Italic.ttf") format("truetype");      font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/BarlowCondensed-MediumItalic.ttf") format("truetype");font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/BarlowCondensed-BoldItalic.ttf") format("truetype");  font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/BarlowCondensed-BlackItalic.ttf") format("truetype");font-weight: 900; font-style: italic; font-display: swap; }

:root {
  /* ---------- BRAND CORE ---------- */
  --alco-yellow:        #F2D754;   /* primary accent, pulled from logo */
  --alco-yellow-hot:    #FFE14A;   /* hover / emphasis */
  --alco-yellow-deep:   #C9A82B;   /* pressed / on-light text */
  --alco-black:         #0A0A0A;   /* stage */
  --alco-ink:           #161616;   /* cards on black */
  --alco-bone:          #F7F3EA;   /* warm off-white, not stark */
  --alco-cream:         #EFE8D8;   /* alt paper */

  /* ---------- NEUTRALS (warm-tinted) ---------- */
  --n-0:   #FFFFFF;
  --n-50:  #F7F3EA;
  --n-100: #ECE6D8;
  --n-200: #D9D2C2;
  --n-300: #B8B0A0;
  --n-400: #8A8479;
  --n-500: #5E5A52;
  --n-600: #3C3A34;
  --n-700: #242320;
  --n-800: #161616;
  --n-900: #0A0A0A;

  /* ---------- SEMANTIC (on dark stage) ---------- */
  --bg:          var(--alco-black);
  --bg-raised:   var(--alco-ink);
  --bg-sunken:   #050505;
  --fg1:         #F7F3EA;               /* primary text */
  --fg2:         rgba(247,243,234,.72); /* secondary */
  --fg3:         rgba(247,243,234,.48); /* tertiary / meta */
  --fg-mute:     rgba(247,243,234,.28);
  --border:      rgba(247,243,234,.10);
  --border-strong: rgba(247,243,234,.22);
  --accent:      var(--alco-yellow);
  --accent-fg:   var(--alco-black);     /* text on yellow */

  /* ---------- SEMANTIC (on bone/light) ---------- */
  --bg-light:          var(--alco-bone);
  --bg-light-raised:   #FFFDF6;
  --fg1-light:         #0A0A0A;
  --fg2-light:         rgba(10,10,10,.68);
  --fg3-light:         rgba(10,10,10,.44);
  --border-light:      rgba(10,10,10,.10);
  --border-light-strong: rgba(10,10,10,.22);

  /* ---------- STATUS ---------- */
  --success: #7BB85C;
  --warning: #F2A84A;
  --danger:  #E5523E;
  --info:    #6FA8C9;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: "Barlow Condensed", "Bebas Neue", "Arial Narrow", sans-serif;
  --font-body:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SFMono-Regular", ui-monospace, monospace;

  /* ---------- TYPE SIZES (fluid-friendly) ---------- */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  44px;
  --fs-4xl:  64px;
  --fs-5xl:  96px;
  --fs-6xl:  144px;

  --lh-tight:  1.0;
  --lh-snug:   1.15;
  --lh-body:   1.55;
  --lh-loose:  1.7;

  --tracking-display: -0.01em;
  --tracking-caps:     0.08em;
  --tracking-caps-lg:  0.14em;

  /* ---------- SPACING (4px base) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ---------- RADII ---------- */
  --r-0:    0px;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 999px;

  /* ---------- SHADOWS (warm, not purple) ---------- */
  --shadow-sm:  0 1px 2px rgba(10,10,10,.20);
  --shadow-md:  0 4px 14px rgba(10,10,10,.28);
  --shadow-lg:  0 18px 44px rgba(10,10,10,.38);
  --shadow-xl:  0 40px 100px rgba(10,10,10,.55);
  --shadow-yellow-glow: 0 0 0 2px rgba(242,215,84,.35), 0 10px 30px rgba(242,215,84,.25);

  /* ---------- MOTION ---------- */
  --ease-out:     cubic-bezier(.22,1,.36,1);
  --ease-in-out:  cubic-bezier(.65,0,.35,1);
  --ease-snap:    cubic-bezier(.2,.9,.2,1.2); /* tiny overshoot, playful */
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;
  --dur-reel:   700ms;
}

/* ============================================================
   SEMANTIC TYPE ROLES
   Use .alco- prefix so they don't collide with host-page styles.
   ============================================================ */

.alco-display-xl,
.alco-display-lg,
.alco-display-md,
.alco-display-sm {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
.alco-display-xl { font-size: var(--fs-6xl); }
.alco-display-lg { font-size: var(--fs-5xl); }
.alco-display-md { font-size: var(--fs-4xl); }
.alco-display-sm { font-size: var(--fs-3xl); }

.alco-h1 { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-3xl); line-height: var(--lh-snug); letter-spacing: -0.015em; }
.alco-h2 { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-2xl); line-height: var(--lh-snug); letter-spacing: -0.01em; }
.alco-h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-xl); line-height: var(--lh-snug); }
.alco-h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-lg); line-height: var(--lh-snug); }

.alco-body-lg { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-md); line-height: var(--lh-body); }
.alco-body    { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-base); line-height: var(--lh-body); }
.alco-body-sm { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-sm); line-height: var(--lh-body); }

.alco-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-xs);
  line-height: 1;
  letter-spacing: var(--tracking-caps-lg);
  text-transform: uppercase;
  color: var(--fg2);
}

.alco-meta {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fg3);
}

.alco-quote {
  font-family: var(--font-body);
  font-weight: 500;
  font-style: italic;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
}

/* Default weight for display family is heavy/black to match the logo wordmark */
[class*="alco-display"],
.alco-strike {
  font-weight: 800;
}

/* ============================================================
   SIGNATURE: the yellow strikethrough
   Usage: <span class="alco-strike">ALCO</span>
   ============================================================ */
.alco-strike {
  position: relative;
  display: inline-block;
  isolation: isolate;
}
.alco-strike::after {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  top: 52%;
  height: 0.09em;
  background: var(--alco-yellow);
  transform: translateY(-50%);
  z-index: -1;
  border-radius: 2px;
}
.alco-strike--thick::after { height: 0.14em; }
.alco-strike--front::after { z-index: 1; mix-blend-mode: normal; }