/* =========================================================
   BrickedRx Design System — Foundations
   Colors, type, spacing, radii, shadows, motion
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  /* ---------- Palette (raw) ---------- */
  --brick: #a84432;           /* primary */
  --brick-dark: #8f3726;      /* hover */
  --brick-darker: #75291c;    /* pressed */
  --ember: #d97757;           /* accent / highlight */
  --ink: #1a1614;             /* near-black, warm */
  --ink-2: #2b2520;           /* elevated ink */
  --stone: #6b5e54;           /* secondary text */
  --stone-2: #9a8d82;         /* tertiary / disabled */
  --paper: #f5efe7;           /* default bg */
  --cream: #faf6f0;           /* card bg on paper */
  --bone:  #ece3d6;           /* divider on paper */
  --forest: #4a5d3a;          /* success */
  --mustard: #c68a3f;         /* warning */
  --danger: #8b2e1f;          /* danger */

  /* ---------- Semantic ---------- */
  --bg:           var(--paper);
  --bg-elevated:  var(--cream);
  --bg-inverse:   var(--ink);
  --fg:           var(--ink);
  --fg-2:         var(--stone);
  --fg-3:         var(--stone-2);
  --fg-inverse:   var(--paper);
  --accent:       var(--brick);
  --accent-hover: var(--brick-dark);
  --accent-press: var(--brick-darker);
  --border:       rgba(26, 22, 20, 0.10);
  --border-soft:  rgba(26, 22, 20, 0.06);
  --border-strong:rgba(26, 22, 20, 0.18);
  --border-inverse: rgba(245, 239, 231, 0.10);

  /* ---------- Type ---------- */
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Manrope', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Fluid type scale */
  --fs-eyebrow: 12px;
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-4xl: 48px;
  --fs-5xl: 64px;
  --fs-6xl: 88px;
  --fs-display: 120px;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.55;
  --lh-loose: 1.65;

  --tracking-tight: -0.03em;
  --tracking-tighter: -0.04em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.08em;

  /* ---------- Spacing (8pt grid) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ---------- Radii ---------- */
  --r-0: 0px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-sm:  0 1px 2px rgba(26, 22, 20, 0.06);
  --shadow-md:  0 4px 12px rgba(26, 22, 20, 0.08), 0 1px 2px rgba(26, 22, 20, 0.04);
  --shadow-lg:  0 12px 32px rgba(26, 22, 20, 0.12), 0 4px 8px rgba(26, 22, 20, 0.06);
  --shadow-xl:  0 24px 48px rgba(26, 22, 20, 0.16), 0 8px 16px rgba(26, 22, 20, 0.08);
  --shadow-cta: 0 6px 16px rgba(168, 68, 50, 0.28);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.18);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.6, 1.0);
  --dur-micro: 150ms;
  --dur-std: 240ms;
  --dur-long: 400ms;

  /* ---------- Layout ---------- */
  --container: 1200px;
  --container-wide: 1440px;
  --nav-h: 72px;
}

/* Dark inversion for sections on ink */
.on-ink {
  --bg: var(--ink);
  --bg-elevated: var(--ink-2);
  --fg: var(--paper);
  --fg-2: #bcae9f;
  --fg-3: #7a6f63;
  --border: rgba(245, 239, 231, 0.10);
  --border-soft: rgba(245, 239, 231, 0.06);
  --border-strong: rgba(245, 239, 231, 0.20);
  color: var(--fg);
  background: var(--bg);
}

/* ---------- Base type presets ---------- */
html, body { font-family: var(--font-body); color: var(--fg); background: var(--bg); font-size: var(--fs-base); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; }

.h-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(56px, 8vw, var(--fs-display));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tighter);
  text-wrap: balance;
}
.h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-4xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
.h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-normal);
}
.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--accent);
}
.body-lg { font-size: var(--fs-lg); line-height: var(--lh-loose); text-wrap: pretty; }
.body    { font-size: var(--fs-base); line-height: var(--lh-normal); text-wrap: pretty; }
.body-sm { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--fg-2); }
.mono    { font-family: var(--font-mono); font-feature-settings: 'ss01'; letter-spacing: 0; }
.caption { font-size: var(--fs-xs); color: var(--fg-2); letter-spacing: var(--tracking-wide); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 14px 24px;
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--fs-sm); letter-spacing: var(--tracking-caps); text-transform: uppercase;
  border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur-std) var(--ease-out), transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-std) var(--ease-out);
  text-decoration: none;
}
.btn-primary { background: var(--accent); color: var(--paper); box-shadow: var(--shadow-cta); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-press); transform: translateY(1px); }
.btn-secondary { background: var(--ink); color: var(--paper); }
.btn-secondary:hover { background: var(--ink-2); }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--border); }
.btn-ghost:hover { background: rgba(26,22,20,0.04); border-color: var(--border-strong); }
.btn-sm { padding: 10px 16px; font-size: var(--fs-xs); }

/* ---------- Cards ---------- */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-std) var(--ease-out), transform var(--dur-std) var(--ease-out), border-color var(--dur-std) var(--ease-out);
}
.card.interactive:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--border-strong); }

/* ---------- Form inputs ---------- */
.input {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-body); font-size: var(--fs-base);
  background: var(--bg-elevated); color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--dur-std) var(--ease-out), box-shadow var(--dur-std) var(--ease-out);
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(168, 68, 50, 0.12); }

/* ---------- Badges / chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-wide);
  background: var(--bg-elevated); color: var(--fg-2); border: 1px solid var(--border);
}
.chip-brick { background: rgba(168, 68, 50, 0.08); color: var(--accent); border-color: rgba(168, 68, 50, 0.2); }
.chip-ink   { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Paper grain — attach as overlay on .paper-grain element */
.paper-grain {
  position: relative;
}
.paper-grain::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='2'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.35'/></svg>");
  opacity: 0.045; mix-blend-mode: multiply;
}