/* InMemorial branding — typography & layout tokens */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&family=Taviraj:wght@200;300;400;600&display=swap');

:root{
  /* fonts */
  --font-primary: "Taviraj", serif;     /* headings */
  --font-secondary: "Montserrat", sans-serif; /* body, ui */
  --lh-base: 1.625;

  /* font sizes */
  --fs-base: 16px;
  --fs-2xl: 43px;   /* 2xlarge */
  --fs-xl: 32px;    /* xlarge */
  --fs-lg: 28px;    /* large */
  --fs-md: 24px;    /* medium */
  --fs-sm: 14px;    /* small */

  /* weights */
  --fw-primary: 400;   /* Extra Light for Taviraj (primary) */
  --fw-secondary: 800; /* Medium for Montserrat (secondary) */

  /* controls */
  --ctl-h: 40px;
  --ctl-h-sm: 30px;
  --ctl-h-lg: 55px;

  /* spacing tokens (can be used for overrides) */
  --space-gutter: 20px;
  --space-gutter-md: 40px;
  --space-gutter-lg: 70px;
  --space-m: 20px;
  --space-m-md: 40px;
  --space-m-lg: 70px;
  --space-m-xl: 140px;

  /* z-index */
  --z-ui: 1000;

  /* colors (placeholders; inherit site palette) */
  --brand-fg: #0b0b0b;
  --brand-bg: #ffffff;
  --brand-accent: #0f6; /* tweak later */
  --brand-muted: #666;
}

/* Base typography */
html { font-size: var(--fs-base); }
body {
  font-family: var(--font-secondary);
  line-height: var(--lh-base);
  color: var(--brand-fg);
  background: var(--brand-bg);
}

/* Headings use Taviraj at 200 weight */
h1, h2, h3, h4, h5 {
  font-family: var(--font-primary);
  font-weight: var(--fw-primary);
  margin: 0 0 .4em 0;
  line-height: 1.2;
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
.small, .text-small, small { font-size: var(--fs-sm); }

/* Controls height normalization */
input, select, textarea, button {
  font-family: var(--font-secondary);
  line-height: 1.2;
}
button, input[type="button"], input[type="submit"], .btn {
  min-height: var(--ctl-h);
  padding: 0 14px;
  border-radius: 0; /* radius 0 per tokens */
}
.btn-sm, .small button, button.small {
  min-height: var(--ctl-h-sm);
}
.btn-lg, .large button, button.large {
  min-height: var(--ctl-h-lg);
}

/* Optional brand header (non-invasive) */
#witness-brandbar {
  position: sticky;
  top: 0;
  z-index: var(--z-ui);
  background: #0f172a; /* dark slate */
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
  font-family: var(--font-secondary);
}
#witness-brandbar img { height: 28px; width: auto; }
#witness-brandbar .brand-title { font-weight: 600; letter-spacing: .2px; }
#witness-brandbar .brand-dot { height: 8px; width: 8px; border-radius: 50%; background:#22c55e; display:inline-block; }
#witness-brandbar .brand-sub { font-size: 12px; color: #cbd5e1; margin-left: 6px; }

/* Make common form elements breathe a bit */
input, select, textarea { padding: 8px 10px; }
label { font-size: var(--fs-sm); color: var(--brand-muted); }

/* You can add targeted overrides for VDO.Ninja elements here if needed */