/* =========================================================
   BRENZ PIZZA CO. — colors_and_type.css
   Premium. Pizza. Delivered.
   ========================================================= */

/* ---------- FONT FACES ---------- */

@font-face {
  font-family: "Franchise";
  src: url("fonts/Franchise-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("fonts/ProximaNova-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("fonts/ProximaNova-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("fonts/ProximaNova-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("fonts/ProximaNova-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("fonts/ProximaNova-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* =====================================================
     TYPE TOKENS
     Three families. Franchise for display, Proxima Nova for
     everything else. Interface is an optional alias for body
     copy per the guidelines — we map it to Proxima Nova Light
     by default so one download covers all uses.
     ===================================================== */
  --font-display: "Franchise", "Oswald", "Impact", sans-serif;
  --font-sans:    "Proxima Nova", "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Proxima Nova", "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Franchise wants all-caps. Tight leading (82% per guidelines). */
  --lh-display: 0.82;
  --track-display: 0.01em;

  /* Proxima Nova sub-heading: all caps, 150 tracking, leading = font size */
  --lh-sub: 1;
  --track-sub: 0.15em;

  /* Body text */
  --lh-body: 1.5;
  --track-body: 0;

  /* Type scale — designed for the 1920-grid and mobile, use sparingly
     Pass-4: minimum body 18px desktop / 16px mobile. No Light weight on body. */
  --fs-display-xxl: clamp(72px, 11vw, 192px);
  --fs-display-xl:  clamp(56px, 7.5vw, 120px);
  --fs-display-lg:  clamp(44px, 5vw, 88px);
  --fs-display-md:  clamp(36px, 3.2vw, 56px);
  --fs-sub-lg:      24px;
  --fs-sub-md:      20px;
  --fs-sub-sm:      14px;
  --fs-body-lg:     20px;
  --fs-body-md:     18px;
  --fs-body-sm:     16px;
  --fs-caption:     14px;

  /* =====================================================
     COLOR — from PDF, page 27
     ===================================================== */

  /* Blacks */
  --brenz-black:       #000000;          /* true black, 100% K for rich effect */
  --brenz-rich-black:  #0A0A0A;           /* rich black anchor */
  --brenz-charcoal:    #323232;          /* full black per guide, RGB 50/50/50 */
  --brenz-ink:         #141414;          /* workshop ink used on cards */

  /* Whites / off-whites */
  --brenz-white:       #F8F8F2;          /* Brenz White, RGB 248/248/242 */
  --paper:             #FFFFFF;          /* true white for high-contrast pieces */

  /* Brand Reds — "Pizza Red" */
  --brenz-red:         #CA402B;          /* Pizza Red L — light variant on dark */
  --brenz-red-deep:    #8E2917;          /* Pizza Red D — dark variant on light */

  /* Accent (use *very* rarely) */
  --brenz-gold:        #A2D06D;          /* mis-labeled "Golden Yellow" in guide, actually olive-green */

  /* Grayscale ladder derived from charcoal */
  --gray-950: #0A0A0A;
  --gray-900: #141414;
  --gray-850: #1B1B1B;
  --gray-800: #232323;
  --gray-700: #323232;
  --gray-600: #4A4A4A;
  --gray-500: #6E6E6E;
  --gray-400: #9A9A9A;
  --gray-300: #C9C9C9;
  --gray-200: #E4E4DF;
  --gray-100: #EFEFEA;
  --gray-50:  #F5F5F0;

  /* =====================================================
     SEMANTIC TOKENS — dark-first (our social voice)
     ===================================================== */
  --bg:            var(--brenz-black);
  --bg-elev-1:     var(--gray-900);
  --bg-elev-2:     var(--gray-850);
  --bg-elev-3:     var(--gray-800);
  --bg-paper:      var(--brenz-white);   /* when going light */
  --surface-card:  var(--gray-900);
  --surface-inset: var(--gray-950);

  /* Foreground */
  --fg-1: var(--brenz-white);             /* primary text on dark */
  --fg-2: rgba(248, 248, 242, 0.72);      /* secondary */
  --fg-3: rgba(248, 248, 242, 0.48);      /* tertiary / hint */
  --fg-4: rgba(248, 248, 242, 0.24);      /* disabled */

  /* Foreground on paper (when we flip light) */
  --fg-on-paper-1: var(--brenz-charcoal);
  --fg-on-paper-2: rgba(50, 50, 50, 0.72);
  --fg-on-paper-3: rgba(50, 50, 50, 0.48);

  /* Accents — the single hit of red, used when it counts */
  --accent:         var(--brenz-red);
  --accent-hover:   #D84E38;
  --accent-press:   #B0371E;
  --accent-on-light: var(--brenz-red-deep);

  /* Borders & dividers */
  --border-1: rgba(248, 248, 242, 0.10);
  --border-2: rgba(248, 248, 242, 0.18);
  --border-strong: rgba(248, 248, 242, 0.32);
  --border-on-paper-1: rgba(50, 50, 50, 0.12);
  --border-on-paper-2: rgba(50, 50, 50, 0.22);

  /* Focus */
  --focus-ring: 0 0 0 2px var(--brenz-black), 0 0 0 4px var(--brenz-red);

  /* Status (used sparingly — brand is nearly monochrome) */
  --status-success: #6E8E3D;
  --status-warn:    #C8933B;
  --status-error:   var(--brenz-red);

  /* =====================================================
     SPACING / RADIUS / SHADOW
     ===================================================== */
  --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;
  --space-10: 128px;

  /* Corners — sharp is on-brand. Never fluffy. */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;

  /* Elevation — subtle. We prefer contrast to depth. */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 24px 48px rgba(0, 0, 0, 0.55);
  --shadow-inner: inset 0 0 0 1px var(--border-1);

  /* Common protection gradient for logo-over-image */
  --protect-bottom: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);
  --protect-top:    linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-med: 220ms;
  --dur-slow: 420ms;
}

/* =====================================================
   BASE ELEMENT STYLES
   ===================================================== */

html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (max-width: 720px) {
  html, body { font-size: 16px; }
}

::selection {
  background: var(--brenz-red);
  color: var(--brenz-white);
}

/* Display — Franchise, all caps, tight leading */
h1, .h1, .display-xl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  margin: 0;
}

.display-xxl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-xxl);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  margin: 0;
}

h2, .h2, .display-lg {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  margin: 0;
}

/* Sub-heading — Proxima Nova ExtraBold/Black, all caps, 150 tracking */
h3, .h3, .eyebrow, .subhead {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-sub-lg);
  line-height: var(--lh-sub);
  letter-spacing: var(--track-sub);
  text-transform: uppercase;
  margin: 0;
}

.eyebrow-sm {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: var(--fs-sub-sm);
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: none;
  margin: 0;
}

/* Body */
p, .body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body-md);
  line-height: 1.55;
  text-wrap: pretty;
  margin: 0;
}

.body-lg { font-size: var(--fs-body-lg); }
.body-sm { font-size: var(--fs-body-sm); }
.caption { font-size: var(--fs-caption); color: var(--fg-2); letter-spacing: 0.02em; }

/* Pass-4 readability override:
   The shared <Body> primitive defaulted to weight 300 and various opacities.
   These rules force readable defaults wherever <p> renders body copy. */
main p, section p, article p { font-weight: 400; }

/* Inline */
strong, b { font-weight: 700; }
a {
  color: var(--brenz-white);
  text-decoration: none;
  border-bottom: 1px solid var(--border-2);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
a:hover {
  color: var(--brenz-red);
  border-color: var(--brenz-red);
}

/* Utility: red accent text (use sparingly) */
.accent { color: var(--brenz-red); }

/* Utility: paper mode — flips tokens for light surfaces */
.on-paper {
  background: var(--brenz-white);
  color: var(--fg-on-paper-1);
}
.on-paper a { color: var(--fg-on-paper-1); border-bottom-color: var(--border-on-paper-2); }
.on-paper a:hover { color: var(--brenz-red-deep); border-color: var(--brenz-red-deep); }

/* Franchise-only helper (paragraph-mode disallowed by guidelines) */
.franchise { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--track-display); line-height: var(--lh-display); }


/* Consistent interaction feedback for shared calls to action. */
.brenz-btn,
.brenz-home-icon-button,
.brenz-home-text-button,
.brenz-home-text-link {
  transition:
    background-color 180ms var(--ease-out),
    color 180ms var(--ease-out),
    border-color 180ms var(--ease-out),
    transform 180ms var(--ease-out),
    box-shadow 180ms var(--ease-out) !important;
}

@media (hover: hover) {
  .brenz-btn:not(:disabled):not([aria-disabled="true"]):hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
  }

  .brenz-btn--primary:not(:disabled):not([aria-disabled="true"]):hover,
  .brenz-btn--redDark:not(:disabled):not([aria-disabled="true"]):hover {
    background: var(--brenz-red-deep) !important;
    color: var(--brenz-white) !important;
    border-color: var(--brenz-red-deep) !important;
  }

  .brenz-btn--dark:not(:disabled):not([aria-disabled="true"]):hover,
  .brenz-btn--secondary:not(:disabled):not([aria-disabled="true"]):hover,
  .brenz-btn--ghost:not(:disabled):not([aria-disabled="true"]):hover,
  .brenz-btn--light:not(:disabled):not([aria-disabled="true"]):hover,
  .brenz-btn--outline-dark:not(:disabled):not([aria-disabled="true"]):hover {
    background: var(--brenz-red) !important;
    color: var(--brenz-white) !important;
    border-color: var(--brenz-red) !important;
  }

  .brenz-home-icon-button:hover {
    background: var(--brenz-red) !important;
    border-color: var(--brenz-red) !important;
    color: var(--brenz-white) !important;
    transform: translateY(-2px);
  }

  .brenz-home-text-button:hover,
  .brenz-home-text-link:hover {
    color: var(--brenz-red) !important;
    border-color: var(--brenz-red) !important;
  }
}

.brenz-btn:active,
.brenz-home-icon-button:active {
  transform: translateY(0);
}

.brenz-btn:focus-visible,
.brenz-home-icon-button:focus-visible,
.brenz-home-text-button:focus-visible,
.brenz-home-text-link:focus-visible {
  outline: 3px solid var(--brenz-white);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--brenz-red);
}