/* ============================================================================
   YOUNG AMERICAN FOOD BRANDS — Design Tokens
   "America's Protein Company"
   ----------------------------------------------------------------------------
   Single source of truth for color + type across the parent (YAFB) brand and
   its portfolio of sub-brands. Derived from the official Brand Standard
   (Guide_Final). Pantone references are noted; RGB/HEX is authoritative for
   all web + screen material (per the guide).

   FONT NOTE / SUBSTITUTION
   - The logo / display face is "Alternate Gothic No.3 D Regular" (licensed,
     Monotype). It is NOT freely embeddable, so this system substitutes
     OSWALD (condensed gothic, also used genuinely across several sub-brands)
     for display, and ANTON for the ultra-heavy logo lockup weight.
   - Body copy uses ARIAL (the brand's documented office/web body font),
     with Helvetica fallbacks. Arial is a system font; no webfont needed.
   - If you have the real Alternate Gothic No.3 D files, drop them in fonts/
     and point --font-display at them.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&family=Anton&display=swap');

:root {
  /* ---------------------------------------------------------------------- */
  /* PARENT BRAND — YAFB CORE PALETTE                                        */
  /* ---------------------------------------------------------------------- */
  --yafb-red:        #A6192E;  /* Pantone 187 C · the painted-tag red · primary brand color */
  --yafb-red-ink:    #8A1426;  /* pressed / hover-dark red                              */
  --yafb-blue:       #1D4F91;  /* NOT a parent color — secondary/portfolio accent only  */
  --yafb-blue-ink:   #163D70;  /* pressed / hover-dark blue                             */
  --yafb-black:      #111418;  /* Pantone Black 6 · near-black ink                      */
  --yafb-true-black: #000000;  /* pure black — logos & wordmarks only                   */
  --yafb-white:      #FFFFFF;
  --yafb-gray:       #E4E5E6;  /* light gray · alternate element / background           */

  /* Neutral ramp (built around the documented light gray + Black 6) */
  --paper:    #FFFFFF;
  --paper-2:  #F6F6F7;
  --paper-3:  #ECEDEE;
  --line:     #E4E5E6;
  --line-2:   #D3D5D8;
  --ink-3:    #6B7078;
  --ink-2:    #3A3F45;
  --ink:      #111418;

  /* ---------------------------------------------------------------------- */
  /* SEMANTIC COLOR                                                          */
  /* ---------------------------------------------------------------------- */
  --color-bg:           var(--paper);
  --color-surface:      var(--paper-2);
  --color-fg:           var(--ink);
  --color-fg-muted:     var(--ink-3);
  --color-border:       var(--line);
  --color-accent:       var(--yafb-red);
  --color-accent-ink:   var(--yafb-red-ink);
  --color-on-accent:    var(--yafb-white);
  --color-secondary:    var(--yafb-blue);
  --color-link:         var(--yafb-blue);

  /* ---------------------------------------------------------------------- */
  /* TYPOGRAPHY                                                              */
  /* ---------------------------------------------------------------------- */
  --font-logo:    'Anton', 'Oswald', 'Arial Narrow', sans-serif;
  --font-display: 'Oswald', 'Arial Narrow', Arial, sans-serif;
  --font-body:    Arial, 'Helvetica Neue', Helvetica, sans-serif;

  --display-tracking: 0.01em;
  --eyebrow-tracking: 0.16em;

  /* Type scale (1.250 major-third, 16px base) */
  --fs-eyebrow: 0.8125rem;  /* 13px */
  --fs-small:   0.875rem;   /* 14px */
  --fs-body:    1rem;       /* 16px */
  --fs-body-lg: 1.125rem;   /* 18px */
  --fs-h6:      1.125rem;   /* 18px */
  --fs-h5:      1.375rem;   /* 22px */
  --fs-h4:      1.75rem;    /* 28px */
  --fs-h3:      2.25rem;    /* 36px */
  --fs-h2:      3rem;       /* 48px */
  --fs-h1:      4rem;       /* 64px */
  --fs-display: 5.75rem;    /* 92px — hero lockups */

  --lh-tight: 0.95;
  --lh-snug:  1.1;
  --lh-body:  1.6;

  /* ---------------------------------------------------------------------- */
  /* SHAPE, SHADOW, SPACING                                                  */
  /* ---------------------------------------------------------------------- */
  --radius-sm: 3px;
  --radius:    5px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(17,20,24,.08);
  --shadow:    0 2px 8px rgba(17,20,24,.10);
  --shadow-lg: 0 12px 32px rgba(17,20,24,.16);

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px;

  --container: 1200px;
  --ease: cubic-bezier(.2,.6,.2,1);
}

/* ============================================================================
   SUB-BRAND PALETTES
   ============================================================================ */
:root {
  --devault-red:   #CE2027;
  --devault-blue:  #102C5A;

  --brooklyn-blue:      #7BABDB;
  --brooklyn-blue-mid:  #559AD9;
  --brooklyn-navy:      #002759;

  --freegraze-green: #9ACA3C;
  --freegraze-red:   #EB2426;

  --hofmann-red:    #C8102E;
  --hofmann-maroon: #862633;

  --miami-black: #111418;

  --florida-green:      #71A850;
  --florida-green-dk:   #40683C;
  --florida-gold:       #F5B335;

  --youngridge-black: #111418;

  --sizzle-red:    #DA291C;
  --sizzle-yellow: #FEDD00;

  --bests-orange: #F16722;
  --bests-red:    #CF3426;

  --wurst-brown: #857550;
  --wurst-black: #111418;
}