/* ==========================================================================
   Core Design System
   ==========================================================================
   This file defines visual primitives, typography utilities, and print-first
   affordances used across all modules.

   Core does NOT:
   - define layout or positioning
   - style navigation
   - size the page or paper
   - target raw HTML elements (except utilities)

   Layout responsibilities live in layout.css.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Design Tokens
   --------------------------------------------------------------------------
   These tokens are intentionally minimal and stable.
   If a token is not consumed by a utility below, it does not belong here.
   -------------------------------------------------------------------------- */

:root {
  /* Color system */
  --accent: #2f6fa3;
  --accent-light: #eef4f9;
  --parity: #7c3aed;
  --parity-light: #f3e8ff;

  --border: #000;
  --muted: #666;

  /* Typography */
  --text-small: 8.5pt;
  --text-base: 9.5pt;
  --text-heading: 11pt;

  /* Spacing scale (print-calibrated) */
  --space-xxs: 0.02in;
  --space-xs: 0.04in;
  --space-sm: 0.08in;
  --space-md: 0.12in;
  --space-lg: 0.15in;
}


/* --------------------------------------------------------------------------
   Typography Utilities
   --------------------------------------------------------------------------
   These classes are semantic helpers, not layout tools.
   -------------------------------------------------------------------------- */

.heading {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-heading);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent);
}

.heading--muted {
  color: var(--muted);
}

.subheading {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.75;
  margin-bottom: var(--space-xs);
}

/* ---------- Tertiary Headings ---------- */

/*
  h3 is used for sectional sub-headings inside cells
  (e.g. Chores groups, Calendar sections).
  This is intentionally lightweight and semantic.
*/
h3 {
  margin: 0 0 var(--space-xs);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}


/* --------------------------------------------------------------------------
   Text Utilities
   -------------------------------------------------------------------------- */

.text {
  font-size: var(--text-base);
  line-height: 1.1;
}

.text--small {
  font-size: var(--text-small);
}

.text--muted {
  color: var(--muted);
}

.text--time {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   Section Primitive
   --------------------------------------------------------------------------
   A section is a visual grouping tool inside a module.
   It does NOT control page layout or grid placement.
   -------------------------------------------------------------------------- */

.section {
  display: block;
  margin-top: 1rem;
  padding-left: 0.75rem;
  border-left: 3px solid transparent;
}

.section + .section {
  margin-top: var(--space-lg);
}

/* Boxed variant (used sparingly) */
.section--boxed {
  border: 1px solid var(--border);
  padding: var(--space-lg);
  background: var(--accent-light);
}

/* Optional section heading (explicit, not element-based) */
.section > .subheading {
  margin-bottom: var(--space-xs);
}

/* Semantic accents */
.section--muted {
  border-left-color: var(--muted);
}

.section--accent {
  border-left-color: var(--accent);
}

.section--parity {
  border-left-color: var(--parity);
}


/* --------------------------------------------------------------------------
   Lists
   --------------------------------------------------------------------------
   Designed for checklists, write-in areas, and print clarity.
   -------------------------------------------------------------------------- */

.list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.list-item--tight {
  margin-bottom: var(--space-xs);
}

/* Write-in line (intentional blank space) */
.list-item--blank {
  list-style: none;
  border-bottom: 1px solid var(--border);
  height: 0.22in;
  margin-bottom: 0.12in;
}


/* --------------------------------------------------------------------------
   Nested / Indented Content
   -------------------------------------------------------------------------- */

.subitem {
  margin-left: 0.35in;
  opacity: 0.85;
}

.subitem .text--small {
  font-size: 8.25pt;
}

.indent {
  margin-left: 0.35in;
}

.indent--sm {
  margin-left: 0.18in;
}


/* --------------------------------------------------------------------------
   Indicators (Checkboxes & Bullets)
   --------------------------------------------------------------------------
   These are purely visual indicators, not interactive controls.
   -------------------------------------------------------------------------- */

.checkbox {
  display: inline-block;
  width: 0.15in;
  height: 0.15in;
  border: 1.5px solid var(--border);
  box-sizing: border-box;
  flex-shrink: 0;
  margin-top: 0.03in;
  position: relative;
}

/* Optional single-character mark inside checkbox */
.checkbox-initial {
  position: absolute;
  inset: 0;
  font-size: 7pt;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.checkbox-group {
  display: inline-flex;
  gap: var(--space-xs);
  align-items: center;
}

.bullet {
  display: inline-block;
  width: 0.08in;
  height: 0.08in;
  border-radius: 50%;
  border: 1px solid var(--border);
  flex-shrink: 0;
  opacity: 0.85;
  margin-top: 0.04in;
}

.bullet--secondary {
  width: 0.055in;
  height: 0.055in;
  opacity: 0.55;
  margin-top: 0.05in;
}


/* --------------------------------------------------------------------------
   Chips (Inline Labels)
   -------------------------------------------------------------------------- */

.chip {
  display: inline-block;
  padding: 0.15em 0.45em;
  border-radius: 999px;
  font-size: 0.7em;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.chip--solid {
  color: #fff;
}

.chip--muted {
  background: var(--muted);
  color: #fff;
}


/* --------------------------------------------------------------------------
   Dividers
   -------------------------------------------------------------------------- */

.divider {
  border-top: 1px solid var(--border);
  opacity: 0.4;
  margin: var(--space-md) 0;
}