/* ============================================================
   Closeout · brand tokens
   Internal punch-list tool for Homewood Creations
   Import in your app root: @import "closeout-brand/tokens.css";
   ============================================================ */
:root {
  /* ── Brand ─────────────────────────────────────────── */
  --co-teal:          #1F4548;   /* primary · mark, CLOSED status */
  --co-teal-deep:     #13302F;   /* hover / pressed */
  --co-teal-bright:   #2E6E72;   /* lifted surfaces */
  --co-teal-tint:     #D9E3E2;   /* tinted backgrounds */

  --co-paper:         #F1ECE0;
  --co-card:          #FBF8F1;
  --co-card-2:        #F5F0E5;
  --co-ink:           #18140F;
  --co-ink-muted:     #6F665A;
  --co-rule:          rgba(24,20,15,0.14);
  --co-white:         #FFFFFF;

  /* ── Status (punch-list flavor) ────────────────────── */
  --co-open:          #C88A2B;   /* amber · still open */
  --co-open-tint:     #F3E6C9;
  --co-closed:        #1F4548;   /* teal · closed (matches brand) */
  --co-closed-tint:   #D9E3E2;
  --co-blocking:      #A13434;   /* danger · blocking */
  --co-blocking-tint: #EBD2CD;
  --co-info:          #2F6EA8;
  --co-info-tint:     #D3E0EE;

  /* ── Type ──────────────────────────────────────────── */
  --co-font-display:  "DM Serif Display", Georgia, serif;
  --co-font-mark:     "Work Sans", Inter, system-ui, sans-serif;
  --co-font-ui:       "Inter", system-ui, sans-serif;
  --co-font-mono:     "JetBrains Mono", Menlo, monospace;

  /* ── Spacing (matches Bidbench 8pt scale) ──────────── */
  --co-s-1: 4px; --co-s-2: 8px; --co-s-3: 12px; --co-s-4: 16px;
  --co-s-5: 24px; --co-s-6: 32px; --co-s-7: 48px; --co-s-8: 64px;

  /* ── Radii ────────────────────────────────────────── */
  --co-r-sm: 3px;
  --co-r-md: 6px;
  --co-r-lg: 10px;
  --co-r-xl: 14px;
  --co-r-tile: 22.8%;   /* tile mark radius as % of side */

  /* ── Shadows ──────────────────────────────────────── */
  --co-shadow-sm: 0 1px 0 rgba(24,20,15,0.05), 0 1px 2px rgba(24,20,15,0.04);
  --co-shadow-md: 0 2px 4px rgba(24,20,15,0.06), 0 4px 12px rgba(24,20,15,0.05);
  --co-shadow-lg: 0 8px 24px rgba(24,20,15,0.10), 0 2px 6px rgba(24,20,15,0.06);

  /* ── Focus ────────────────────────────────────────── */
  --co-focus-ring: 0 0 0 3px rgba(31, 69, 72, 0.32);
}

/* ── Utility classes — bracket-as-brand-language ────── */

/* Wordmark with brackets baked in */
.co-wordmark {
  display: inline-flex; align-items: baseline; line-height: 1;
  font-family: var(--co-font-mark); font-weight: 800; color: var(--co-teal);
  letter-spacing: -0.01em;
}
.co-wordmark > .co-bracket { font-size: 1.32em; line-height: 0.9; }
.co-wordmark > .co-bracket:first-child { margin-right: 0.14em; }
.co-wordmark > .co-bracket:last-child  { margin-left: 0.14em; }

/* Tile mark (teal background, reversed brackets) */
.co-tile {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--co-teal); color: var(--co-paper);
  border-radius: var(--co-r-tile);
  font-family: var(--co-font-mark); font-weight: 800;
  letter-spacing: -0.02em;
}
.co-tile > .co-bracket { font-size: 1.32em; line-height: 0.9; }

/* Status pill with brackets — the brand extension */
.co-pill {
  display: inline-flex; align-items: baseline;
  font-family: var(--co-font-mark); font-weight: 800;
  font-size: 10px; letter-spacing: 0.05em; line-height: 1;
  padding: 0;
}
.co-pill > .co-bracket { font-size: 1.32em; line-height: 0.9; margin: 0 0.3em; }
.co-pill--open    { color: var(--co-open); }
.co-pill--closed  { color: var(--co-teal); }
.co-pill--block   { color: var(--co-blocking); }
.co-pill--info    { color: var(--co-info); }

/* Section header with brackets */
.co-section-header {
  font-family: var(--co-font-mark); font-weight: 800;
  font-size: 13px; letter-spacing: 0.02em; color: var(--co-teal);
  display: inline-flex; align-items: baseline;
  text-transform: uppercase;
}
.co-section-header > .co-bracket { font-size: 1.32em; line-height: 0.9; margin: 0 0.2em; }