/* SoulFood Sushi (SFS) brand tokens
   Source of truth: Oakland Family Hackathon page CSS
   (sfs-hackathon-snapshot/assets/index-C8_Z8TKM.css + family-hackathon dist overrides).
   Fonts: load assets/fonts/fonts.css (self-hosted) or Google Fonts:
   https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Rajdhani:wght@600;700&display=swap */
:root {
  /* Color: names match the site's own CSS variables */
  --sfs-ink: #070911;          /* --ink: page background, text on lime/cream */
  --sfs-paper: #f7f4ea;        /* --paper: cream, main text on dark, card frames, ribbon middle block */
  --sfs-muted: #f7f4eab8;      /* --muted: paper at 72%, body copy on dark */
  --sfs-line: #f7f4ea33;       /* --line: paper at 20%, grid lines and rules */
  --sfs-center-line: #f7f4ea0e;/* paper at 5.5%, vertical centre line on the page shell */
  --sfs-blue: #06369d;         /* --blue: royal blue, headline drop shadow, ribbon block 3, kickers on cream */
  --sfs-cobalt: #1464f6;       /* --cobalt: bright blue, team / category card */
  --sfs-cherry: #ef3340;       /* --cherry: red tag behind the kicker, team card */
  --sfs-electric: #c8ff32;     /* --electric: neon lime, key word, primary button, logo seal, hero card frame */
  --sfs-gold: #ffc928;         /* --gold: warm yellow, ribbon block 1, back polaroid frame, partner logo border */
  --sfs-green: #218739;        /* --green: team / category card */
  --sfs-white: #ffffff;        /* text on cherry, blue, cobalt and green */
  --sfs-shadow: #00000061;     /* black at 38%, card drop shadow */

  /* Type */
  --sfs-font-display: "Rajdhani", Impact, sans-serif;  /* 700, uppercase */
  --sfs-font-body: "Inter", Arial, sans-serif;          /* 600 for dek / body, 700 for small labels */
  --sfs-weight-display: 700;
  --sfs-weight-body: 600;
  --sfs-weight-small: 700;

  --sfs-h1-size: clamp(56px, 9vw, 132px);   /* Family page; original Roblox page: clamp(76px, 12vw, 158px) */
  --sfs-h1-line: 0.78;
  --sfs-h2-size: clamp(42px, 5.4vw, 76px);
  --sfs-h2-line: 0.9;
  --sfs-dek-size: clamp(18px, 2vw, 24px);
  --sfs-dek-line: 1.35;
  --sfs-body-size: clamp(18px, 2vw, 23px);
  --sfs-body-line: 1.45;
  --sfs-kicker-tag-size: 18px;
  --sfs-section-kicker-size: 18px;
  --sfs-presenter-size: clamp(15px, 1.6vw, 19px);
  --sfs-presenter-tracking: 0.04em;         /* only letter-spaced style on the page */
  --sfs-button-size: 18px;
  --sfs-caption-size: 14px;
  --sfs-small-size: 14px;
  --sfs-ribbon-title-size: clamp(24px, 2.6vw, 34px);
  --sfs-track-size: clamp(20px, 2vw, 28px);
  --sfs-team-title-size: clamp(30px, 3.4vw, 48px);

  /* Key-word (lime) headline treatment */
  --sfs-keyword-color: var(--sfs-electric);
  --sfs-keyword-shadow: 9px 9px 0 var(--sfs-blue);
  --sfs-keyword-skew: skew(-5deg);          /* faux italic: a skew, not an italic font */

  /* Grid background */
  --sfs-grid-size: 72px;
  --sfs-grid-line: 1px;
  --sfs-grid-opacity: 0.45;
  --sfs-grid-inset: 28px;
  --sfs-grid-border: 2px;

  /* Shape */
  --sfs-radius-button: 8px;
  --sfs-radius: 0;                           /* everything else is square */
  --sfs-border-rule: 2px;                    /* nav / section rules, buttons, partner logos */
  --sfs-border-ribbon-divider: 3px;
  --sfs-border-card: 4px;                    /* polaroids, ribbon, team cards */
  --sfs-border-track: 3px;

  /* Polaroids */
  --sfs-tilt-left: rotate(-5deg);            /* MAC */
  --sfs-tilt-hero: none;                     /* NORI, upright, lime frame */
  --sfs-tilt-right: rotate(5deg);            /* MAKI */
  --sfs-card-shadow: 10px 10px 0 var(--sfs-shadow);
  --sfs-frame-gold-width: 18px;
  --sfs-frame-gold-inset: 58px 38px 52px;
  --sfs-frame-gold-tilt: rotate(-4deg);
  --sfs-frame-paper-width: 3px;
  --sfs-frame-paper-inset: 82px 72px 78px;
  --sfs-frame-paper-tilt: rotate(3deg);
  --sfs-caption-inset: 8px;
  --sfs-caption-padding: 6px 8px;

  /* Tilts on brand pieces */
  --sfs-seal-tilt: rotate(-5deg);
  --sfs-tag-tilt: rotate(-2deg);

  /* Components */
  --sfs-seal-size: 64px;
  --sfs-seal-font-size: 27px;
  --sfs-partner-logo-size: 64px;
  --sfs-button-min-height: 46px;
  --sfs-button-padding: 11px 16px;
  --sfs-tag-padding: 8px 12px;
  --sfs-ribbon-min-height: 104px;
  --sfs-ribbon-padding: 16px 18px;
  --sfs-ribbon-columns: 1fr 1.1fr 1.3fr;

  /* Layout */
  --sfs-page-pad-x: clamp(18px, 5vw, 70px);
  --sfs-section-pad-y: clamp(48px, 7vw, 88px);
  --sfs-breakpoint-tablet: 900px;
  --sfs-breakpoint-phone: 560px;
}