/**
 * Kababayan Connect — design tokens
 *
 * Single source of truth for color, typography, spacing, and motion.
 * All UI CSS in the platform reads from these custom properties. Do not
 * hardcode values in component CSS — if a value is not in this file, it
 * is either an outlier worth interrogating or a missing token worth adding.
 *
 * Reference: BRAND.md at the project root.
 */

:root {
  /* ============================================================
   * Color — Philippines flag as semantic anchors
   * ============================================================ */

  /* System (load-bearing) */
  --kbn-blue: #0038A8;
  --kbn-blue-deep: #002878;

  /* Trust signals — reserved per BRAND.md, do not reuse */
  --kbn-gold: #FCD116;        /* RegisterConfirmed badge dot only */
  --kbn-red: #CE1126;         /* Disputed state and Report flow only */

  /* Ink scale — primary, secondary, metadata, subtle borders */
  --kbn-ink: #0B0E13;
  --kbn-ink-2: #3F4754;
  --kbn-ink-3: #7A8597;
  --kbn-ink-4: #B8C0CD;

  /* Canvas scale — page, card, inset */
  --kbn-canvas: #FFFFFF;
  --kbn-canvas-2: #F8F9FB;
  --kbn-canvas-3: #EFF1F5;

  /* Editorial */
  --kbn-cream: #F5EFE3;
  --kbn-rule: #E4E7EE;

  /* ============================================================
   * Typography
   * ============================================================ */

  --kbn-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --kbn-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Type scale (rem, base 16) */
  --kbn-text-xs: 0.75rem;       /* metadata, timestamps */
  --kbn-text-sm: 0.875rem;      /* captions, labels */
  --kbn-text-base: 1.0625rem;   /* body — slightly larger than 1rem default */
  --kbn-text-md: 1.1875rem;     /* lead paragraph */
  --kbn-text-lg: 1.5rem;        /* subheadings */
  --kbn-text-xl: 2.25rem;       /* h2 */
  --kbn-text-2xl: 3rem;         /* h1 */
  --kbn-text-3xl: 4.5rem;       /* editorial display */
  --kbn-text-4xl: 6rem;         /* homepage hero */

  /* Line heights */
  --kbn-leading-tight: 1.1;
  --kbn-leading-snug: 1.25;
  --kbn-leading-normal: 1.55;
  --kbn-leading-relaxed: 1.7;

  /* Tracking */
  --kbn-tracking-display: -0.02em;
  --kbn-tracking-body: -0.005em;
  --kbn-tracking-eyebrow: 0.12em;

  /* Font weights (variable axes) */
  --kbn-weight-regular: 400;
  --kbn-weight-medium: 500;
  --kbn-weight-semibold: 600;

  /* ============================================================
   * Spacing — 8pt base, fibonacci-ish scale
   * ============================================================ */

  --kbn-space-1: 0.25rem;   /* 4px */
  --kbn-space-2: 0.5rem;    /* 8px */
  --kbn-space-3: 0.75rem;   /* 12px */
  --kbn-space-4: 1rem;      /* 16px */
  --kbn-space-5: 1.5rem;    /* 24px */
  --kbn-space-6: 2rem;      /* 32px */
  --kbn-space-7: 3rem;      /* 48px */
  --kbn-space-8: 4rem;      /* 64px */
  --kbn-space-9: 6rem;      /* 96px */
  --kbn-space-10: 8rem;     /* 128px */

  /* ============================================================
   * Layout
   * ============================================================ */

  --kbn-max-page: 1200px;
  --kbn-max-text: 720px;
  --kbn-page-pad: 2rem;
  --kbn-page-pad-mobile: 1.25rem;

  /* ============================================================
   * Motion — one curve, three durations
   * ============================================================ */

  --kbn-ease: cubic-bezier(0.2, 0, 0, 1);
  --kbn-dur-micro: 120ms;       /* hover, focus, button press */
  --kbn-dur-state: 240ms;       /* badge transitions, panel reveals, filter morphs */
  --kbn-dur-page: 480ms;        /* page-level transitions */

  /* ============================================================
   * Borders, radii, shadows
   * ============================================================ */

  --kbn-hairline: 1px solid var(--kbn-rule);
  --kbn-radius-sm: 2px;
  --kbn-radius-md: 4px;
  --kbn-radius-pill: 999px;
  /* Shadows are deliberately absent. The system uses hairlines, not depth. */

  /* ============================================================
   * Z-index scale
   * ============================================================ */

  --kbn-z-base: 1;
  --kbn-z-sticky: 10;
  --kbn-z-overlay: 50;
  --kbn-z-modal: 100;
  --kbn-z-tooltip: 200;
}

/* ============================================================
 * Dark mode — designed in parallel
 * Per BRAND.md, ink/canvas invert; blue lifts; gold/red damp by 8%
 * ============================================================ */

/* Auto-dark via prefers-color-scheme was removed in v0.12.
 * Reason: dark theme caused contrast / visibility issues on parts of
 * the homepage (event card photos lose contrast against near-black
 * canvas; voices section's oversized blue quote glyph loses contrast).
 * The platform now always renders light unless an explicit
 * `data-kbn-theme="dark"` attribute is applied to <html>, which can be
 * wired up later as an opt-in toggle. The token block below is kept so
 * that opt-in still works for any user who manually flips the attribute. */

:root[data-kbn-theme="dark"] {
  --kbn-ink: #F4F6FA;
  --kbn-ink-2: #B8C0CD;
  --kbn-ink-3: #7A8597;
  --kbn-ink-4: #3F4754;
  --kbn-canvas: #0B0E13;
  --kbn-canvas-2: #131722;
  --kbn-canvas-3: #1A1F2D;
  --kbn-rule: #232938;
  --kbn-blue: #3D7BCC;
  --kbn-blue-deep: #2960B0;
  --kbn-gold: #E8BF14;
  --kbn-red: #BC1023;
  --kbn-cream: #2A2418;
}

/* ============================================================
 * Reset and base — minimal, opinionated
 * ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--kbn-font-body);
  font-size: 16px;
  line-height: var(--kbn-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--kbn-canvas);
  color: var(--kbn-ink);
  font-size: var(--kbn-text-base);
  letter-spacing: var(--kbn-tracking-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--kbn-font-display);
  font-weight: var(--kbn-weight-semibold);
  line-height: var(--kbn-leading-tight);
  letter-spacing: var(--kbn-tracking-display);
  margin: 0;
}

a {
  color: var(--kbn-blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--kbn-dur-micro) var(--kbn-ease);
}
a:hover { border-bottom-color: var(--kbn-blue); }
a:focus-visible {
  outline: 2px solid var(--kbn-blue);
  outline-offset: 3px;
  border-radius: var(--kbn-radius-sm);
}

img, svg { display: block; max-width: 100%; }

.kbn-tnum { font-variant-numeric: tabular-nums; }

.kbn-eyebrow {
  font-size: var(--kbn-text-xs);
  font-weight: var(--kbn-weight-semibold);
  letter-spacing: var(--kbn-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--kbn-ink-3);
}