/* Brarista Design System — main entry point.
   Linking this file gives consumers all design tokens, type scale,
   font loading (Open Sauce Sans + Apparel), and utility classes.
   For the full brand kit also link ui_kits/brand/brand.css.
   For the widget kit also link ui_kits/widget/widget.css. */

/* ──────────────────────────────────────────────────────────────
   Brarista — Colors & Type
   Sources: Figma "Color" and "Typography" frames (nodes 31:124, 31:258)
   ────────────────────────────────────────────────────────────── */

/* ----------  Fonts  ---------- */
/* Open Sauce Sans loaded via @font-face from a CDN with explicit fallback URLs.
   Google Fonts @import was previously blocking the preview iframe; we now load
   each weight individually with font-display:swap so the page renders text
   immediately using the system fallback. */
@font-face { font-family: "Open Sauce Sans"; src: url("fonts/OpenSauceSans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sauce Sans"; src: url("fonts/OpenSauceSans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sauce Sans"; src: url("fonts/OpenSauceSans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sauce Sans"; src: url("fonts/OpenSauceSans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* Apparel — the real brand display serif, supplied by the brand. */
@font-face { font-family: "Apparel"; src: url("fonts/Apparel-100.ttf") format("truetype");        font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Apparel"; src: url("fonts/Apparel-100-Italic.ttf") format("truetype");     font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Apparel"; src: url("fonts/Apparel-300.ttf") format("truetype");       font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Apparel"; src: url("fonts/Apparel-300-Italic.ttf") format("truetype");    font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Apparel"; src: url("fonts/Apparel-400.ttf") format("truetype");     font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Apparel"; src: url("fonts/Apparel-400-Italic.ttf") format("truetype");  font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Apparel"; src: url("fonts/Apparel-700.ttf") format("truetype");        font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Apparel"; src: url("fonts/Apparel-700-Italic.ttf") format("truetype");     font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Apparel"; src: url("fonts/Apparel-900.ttf") format("truetype");       font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Apparel"; src: url("fonts/Apparel-900-Italic.ttf") format("truetype");    font-weight: 900; font-style: italic; font-display: swap; }

:root {
  /* ---------- Brand colors ---------- */
  --br-dark-green:        #143F26;  /* primary brand */
  --br-dark-green-70:     rgba(20,63,38,0.7);
  --br-dark-green-50:     rgba(20,63,38,0.5);
  --br-dark-green-20:     rgba(20,63,38,0.2);
  --br-dark-green-10:     rgba(20,63,38,0.1);

  --br-light-green:       #DBF3A9;  /* secondary on dark green */
  --br-cream:             #FDFAE9;  /* tertiary / "Blush" */
  --br-cream-50:          rgba(253,250,233,0.5);
  --br-cream-30:          rgba(253,250,233,0.3);

  --br-background:        #FFFEFA;  /* page background (off-white) */

  /* Accent / editorial */
  --br-light-pink:        #EBD7F8;
  --br-lighter-pink:      #F4E9FF;
  --br-plum:              #5F2F6A;
  --br-wine:              #8D1947;

  /* Neutrals */
  --br-grey:              #E5E5E5;
  --br-light-grey:        #F6F6F6;
  --br-blush:             #FDFAE9;   /* same hex as cream — kept for naming */

  --br-dark:              #000000;
  --br-dark-70:           rgba(0,0,0,0.7);
  --br-dark-50:           rgba(0,0,0,0.5);
  --br-dark-20:           rgba(0,0,0,0.2);
  --br-dark-10:           rgba(0,0,0,0.1);

  /* ---------- Semantic tokens ---------- */
  --bg:        var(--br-background);
  --bg-elev:   #FFFFFF;
  --bg-dark:   var(--br-dark-green);

  --fg:        var(--br-dark-green);
  --fg-muted:  var(--br-dark-green-70);
  --fg-subtle: var(--br-dark-green-50);
  --fg-on-dark: var(--br-cream);                 /* beige text on dark green */
  --fg-on-dark-muted: rgba(253,250,233,0.7);

  --accent:        var(--br-light-green);        /* secondary on dark-green bg */
  --accent-hover:  var(--br-cream);

  --border:        var(--br-dark-green-20);
  --border-strong: var(--br-dark-green);
  --border-on-dark: rgba(253,250,233,0.2);

  /* ---------- Fonts ---------- */
  --font-display: "Apparel", "Bodoni Moda", "Playfair Display", Georgia, serif;
  --font-sans:    "Open Sauce Sans", "Inter", system-ui, sans-serif;
  /* Body — Open Sauce Sans Medium 500 in the Figma spec. Apparel handles all display + statistics. */
  --font-body:    "Open Sauce Sans", "Inter", system-ui, sans-serif;

  /* ---------- Radii ---------- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-pill: 100px;

  /* ---------- Spacing scale (4-pt grid) ---------- */
  --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: 80px;
  --space-10: 120px;

  /* ---------- Shadows / elevation ---------- */
  --shadow-1: 0 1px 2px rgba(20,63,38,0.06);
  --shadow-2: 0 4px 16px rgba(20,63,38,0.08);
  --shadow-3: 0 16px 48px rgba(20,63,38,0.14);
  --shadow-widget: 0 24px 60px rgba(20,63,38,0.22);

  /* ---------- Status colors ---------- */
  --status-active-bg:   rgba(219,243,169,0.55);
  --status-active-fg:   #143F26;
  --status-active-dot:  #143F26;

  --status-done-bg:     #F6F6F6;
  --status-done-fg:     rgba(20,63,38,0.75);
  --status-done-dot:    rgba(20,63,38,0.45);

  --status-draft-bg:    #F6F6F6;
  --status-draft-fg:    rgba(20,63,38,0.5);
  --status-draft-dot:   rgba(20,63,38,0.25);

  --status-flagged-bg:  rgba(235,215,248,0.5);
  --status-flagged-fg:  #5F2F6A;
  --status-flagged-dot: #8D1947;

  /* ---------- UI density ---------- */
  --font-size-ui:    13px;   /* dense product UI copy */
  --font-size-label: 11px;   /* eyebrow / table header level */

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-soft:     cubic-bezier(0.4, 0, 0.2, 1);       /* @kind other */
  --t-fast: 140ms; /* @kind other */
  --t-med:  220ms; /* @kind other */
  --t-slow: 380ms; /* @kind other */
}

/* ──────────  Type scale (semantic)  ────────── */

html, body { background: var(--bg); color: var(--fg); font-family: var(--font-body); }

.br-h1, h1.br {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 86px;
  line-height: 94px;
  letter-spacing: -0.03em;
  color: var(--fg);
}
.br-h1-italic { font-family: var(--font-display); font-weight: 800; font-style: italic;
  font-size: 86px; line-height: 94px; letter-spacing: -0.03em; }

.br-h2, h2.br {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 67px;
  line-height: 68px;
  letter-spacing: -0.02em;
}
.br-h2-italic { font-family: var(--font-display); font-weight: 800; font-style: italic;
  font-size: 67px; line-height: 68px; letter-spacing: -0.02em; }

.br-h3, h3.br {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 39px;
  line-height: 48px;
  letter-spacing: -0.02em;
}
.br-h4, h4.br {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 31px;
  line-height: 48px;
  letter-spacing: -0.02em;
}
.br-h5, h5.br {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -0.02em;
}

/* Body — Open Sauce Sans Medium (default body workhorse from the Figma spec). */
.br-p1 { font-family: var(--font-body); font-weight: 500; font-size: 31px; line-height: 44px; letter-spacing: -0.02em; }
.br-p2 { font-family: var(--font-body); font-weight: 500; font-size: 24px; line-height: 28px; letter-spacing: -0.02em; }
.br-p3 { font-family: var(--font-body); font-weight: 500; font-size: 20px; line-height: 28px; }
.br-p4 { font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 24px; }
.br-p5, p.br { font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 24px; }
.br-p6 { font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 16px; }
.br-p7 { font-family: var(--font-body); font-weight: 500; font-size: 10px; line-height: 12px; }

.br-stat-1 { font-family: var(--font-display); font-weight: 900; font-size: 86px; line-height: 80px; letter-spacing: -0.03em; }
.br-stat-2 { font-family: var(--font-display); font-weight: 800; font-size: 56px; line-height: 52px; letter-spacing: -0.03em; }

.br-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}