/* =====================================================================
   SNS BRAND: brand.css  (rebuilt from templates/GUIDELINES.md)
   ---------------------------------------------------------------------
   The original file was not in the recovered transcript. This is a
   faithful rebuild from the brand spec in GUIDELINES.md (the current
   source of truth): LIGHT theme, warm off-white background, brand red
   #df315f, PPNeueMontreal typography.

   ⚠ FONTS: the real PPNeueMontreal .woff2 files are still missing. Drop
   them into /assets/fonts/ using the names below (or edit the @font-face
   src paths to match your files). Until then, the system-ui fallback
   renders.
   ===================================================================== */

/* ---- Fonts ---------------------------------------------------------- */
@font-face {
  font-family: 'PPNeueMontreal';
  src: url('/assets/fonts/PPNeueMontreal-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PPNeueMontreal';
  src: url('/assets/fonts/PPNeueMontreal-LightItalic.ttf') format('truetype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'PPNeueMontreal';
  src: url('/assets/fonts/PPNeueMontreal-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PPNeueMontreal';
  src: url('/assets/fonts/PPNeueMontreal-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PPNeueMontreal';
  src: url('/assets/fonts/PPNeueMontreal-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PPNeueMontreal';
  src: url('/assets/fonts/PPNeueMontreal-SemiBolditalic.ttf') format('truetype');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'PPNeueMontreal';
  src: url('/assets/fonts/PPNeueMontreal-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---- Design tokens (light theme: matches GUIDELINES.md) ------------ */
:root {
  --brand:            #df315f;
  --brand-light:      rgba(223, 49, 95, 0.08);
  --brand-mid:        rgba(223, 49, 95, 0.35);
  --brand-fill:       rgba(223, 49, 95, 0.10);

  --surface:          #f5f4f2;   /* warm off-white page background */
  --surface-1:        #ffffff;   /* cards */
  --surface-2:        #f0efed;
  --surface-3:        #e8e7e5;
  --surface-border:   rgba(0, 0, 0, 0.07);

  --ink-primary:      rgba(0, 0, 0, 1);      /* #111 in practice */
  --ink-secondary:    rgba(0, 0, 0, 0.5);
  --ink-muted:        rgba(0, 0, 0, 0.32);
  --ink-subtle:       rgba(0, 0, 0, 0.08);

  --success:          #16a34a;
  --success-bg:       rgba(22, 163, 74, 0.10);
  --danger:           #dc2626;
  --danger-bg:        rgba(220, 38, 38, 0.10);
  --warning:          #d97706;

  --grid-color:       rgba(0, 0, 0, 0.07);
}

/* ---- Base ----------------------------------------------------------- */
html, body {
  background: var(--surface);
  color: #111111;
  font-family: 'PPNeueMontreal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Tabular numerals for KPI values / data (the `metric` utility) */
.metric,
.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Convenience card style matching the brand card spec */
.sns-card {
  background: var(--surface-1);
  border: 1px solid var(--surface-border);
  border-radius: 0.75rem; /* rounded-xl */
}