/* ============================================================
   SwipeDish - Design Tokens
   Ported from the Claude Design "FoodieMatch" system.
   Warm + appetizing: one friendly accent (basil green),
   warm cream neutrals, honey secondary. WCAG-AA tuned.

   TO RE-BRAND: change the values here. Everything reads from
   var(--token). Two spots cannot read CSS variables and must be
   updated by hand to match a new --brand:
     1. <meta name="theme-color"> in each .html file
     2. the hardcoded hex colors in assets/favicon.svg
   ============================================================ */

/* Self-hosted brand fonts (OFL), the same faces the app uses. Self-hosted on
   purpose: no third-party font CDN, so the site makes zero external requests. */
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/BricolageGrotesque-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/BricolageGrotesque-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/BricolageGrotesque-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/BricolageGrotesque-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/HankenGrotesk-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/HankenGrotesk-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/HankenGrotesk-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/HankenGrotesk-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/HankenGrotesk-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Spline Sans Mono"; src: url("../fonts/SplineSansMono-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  /* ---- Brand / accent (berry) ---- */
  --brand:           #E84B6E;
  --brand-strong:    #BE2F50;
  --brand-press:     #9A2240;
  --brand-ink:       #B02A4A;
  --brand-tint:      #FBE6EC;
  --brand-tint-2:    #F6D2DD;

  /* ---- Secondary warmth (honey) ---- */
  --honey:           #F2A93B;
  --honey-ink:       #8A5A12;
  --honey-tint:      #FBEFD8;

  /* ---- Yes / No deck affordances ---- */
  --yes:             #2E9E69; /* affirmative stays green, accent-independent */
  --yes-strong:      #1C7A4D;
  --no:              #E2664A;
  --no-ink:          #B23A20;
  --no-tint:         #FBE7E0;

  /* ---- Semantic ---- */
  --danger:          #C5392A;
  --danger-tint:     #FAE4E0;
  --success:         #1C7A4D;
  --info:            #2F6DB0;

  /* ---- Warm neutrals (paper) ---- */
  --bg:              #FBF7F1;
  --bg-sunken:       #F4EDE2;
  --surface:         #FFFFFF;
  --surface-2:       #FAF6EF;
  --hairline:        #ECE3D5;
  --hairline-strong: #DCD0BE;

  /* ---- Ink (warm near-black) ---- */
  --ink:             #221C16;
  --ink-2:           #6A6056;
  --ink-3:           #9A8F82;
  --ink-on-brand:    #FFFFFF;

  /* ---- Type ---- */
  --font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --font-text:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono:    "Spline Sans Mono", ui-monospace, "SF Mono", monospace;

  --fw-reg: 450;
  --fw-med: 500;
  --fw-semi: 600;
  --fw-bold: 700;

  /* ---- Spacing (4pt base) ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px;

  /* ---- Radii (soft, rounded) ---- */
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 17px;
  --r-xl: 23px;
  --r-pill: 999px;

  /* ---- Shadows (tight, layered, low-opacity) ---- */
  --sh-1: 0 1px 1.5px rgba(45,30,15,.05), 0 0 0 0.5px rgba(45,30,15,.03);
  --sh-2: 0 2px 5px rgba(55,38,18,.06), 0 1px 2px rgba(55,38,18,.05);
  --sh-3: 0 14px 34px rgba(55,38,18,.13), 0 4px 10px rgba(55,38,18,.07);
  --sh-card: 0 6px 18px rgba(50,35,18,.09), 0 1px 3px rgba(50,35,18,.05);
}