/* Weber Design Tokens — sourced from the 2023 Weber Brand Book */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&family=Barlow:wght@400;500;600;700&display=swap');

/* Real brand display face — Conduit ITC Pro
   Weights available:
   - W05 Bold   (full character set, upper + lower)        → 500-700
   - W05 Black  (full character set, upper + lower)        → 800-900
   - ExBd SC    (small caps only — display use only)       → 'Conduit ITC Pro SC' 400-600
   - Black SC   (small caps only — display use only)       → 'Conduit ITC Pro SC' 700-900
   Body still falls back to Barlow until a Regular weight is available. */
@font-face {
  font-family: 'Conduit ITC Pro';
  src: url('fonts/ConduitITCW05-Bold.woff') format('woff');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Conduit ITC Pro';
  src: url('fonts/ConduitITCW05-Black.woff') format('woff');
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Conduit ITC Pro SC';
  src: url('fonts/ConduitExBdSCITCTTW05-Rg.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Conduit ITC Pro SC';
  src: url('fonts/ConduitBlkSCITCTTW05-Rg_ConduitBlkSCITCTTW05-Rg.woff') format('woff');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* CORE PALETTE */
  --weber-red: #dc1e1e;            /* Kettle Red — Pantone 485 C */
  --weber-black: #000000;
  --weber-white: #ffffff;
  --weber-warm-white: #EDE5DF;     /* Pantone 9226 C */

  /* SUPPORTING (food-context only) */
  --weber-bell-pepper: #dd7600;
  --weber-zucchini:    #245617;
  --weber-peppercorn:  #d18686;
  --weber-eggplant:    #6D0A30;
  --weber-mustard:     #F4BA27;

  /* SEMANTIC */
  --bg:        var(--weber-warm-white);
  --bg-alt:    var(--weber-white);
  --bg-dark:   var(--weber-black);
  --ink:       var(--weber-black);
  --ink-muted: #4a4a4a;
  --ink-soft:  #6b6b6b;
  --rule:      rgba(0, 0, 0, 0.12);
  --accent:    var(--weber-red);

  /* TYPE */
  --font-display: 'Conduit ITC Pro', 'Barlow Condensed', 'Oswald', system-ui, sans-serif;
  --font-body:    'Barlow', system-ui, sans-serif;

  --display-tracking: 0.03em;   /* 30/1000 from brand book */
  --body-tracking:    0.005em;

  /* SCALE — 1.5× ratio per brand spec for adjacent headline lines */
  --t-display-xl: clamp(72px, 11vw, 168px);
  --t-display-l:  clamp(48px, 7.3vw, 112px);
  --t-display-m:  clamp(40px, 5vw, 80px);
  --t-h1: 56px;
  --t-h2: 40px;
  --t-h3: 28px;
  --t-h4: 22px;
  --t-eyebrow: 14px;
  --t-body: 17px;
  --t-small: 14px;
  --t-micro: 12px;

  /* SPACING */
  --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 — minimal; brand is rectilinear */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-pill: 999px;

  /* BORDER device — 1/40 canvas height */
  --border-device: 0.025;

  /* MOTION */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 240ms;
}

/* DISPLAY HEADLINE — alternating sizes, 1.5× ratio */
.weber-display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--display-tracking);
  line-height: 0.9;
  color: var(--ink);
}
.weber-display .lg { font-size: var(--t-display-xl); display: block; }
.weber-display .sm { font-size: calc(var(--t-display-xl) / 1.5); display: block; }

/* LINE DEVICE — red rule, 70% of longest line, 1/10 z-height tall */
.weber-line {
  display: block;
  height: 0.1em;
  width: 70%;
  background: var(--weber-red);
  margin: 0.06em 0;
  /* angled edges 35°/145° via clip-path */
  clip-path: polygon(0.4em 0, calc(100% - 0.4em) 0, 100% 100%, 0 100%);
}
.weber-line.flat { clip-path: none; }
.weber-line.up   { clip-path: polygon(0 100%, 100% 100%, calc(100% - 0.4em) 0, 0.4em 0); }

/* BODY */
body, .weber-body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink);
  letter-spacing: var(--body-tracking);
  text-wrap: pretty;
}

.weber-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--t-eyebrow);
  color: var(--weber-red);
}