/* Christman brand stylesheet — Color System v16 + Typography Guide (Tier 3).
   Inline this whole file into a <style> tag for single-file HTML (ShareHub, email, artifacts).
   Fonts: load Google Fonts (see references/html.md) or link fonts-local.css for multi-file sites. */

:root {
  /* Tier 1 — Primary */
  --tcc-copper: #9F662D;
  --tcc-black: #1A1A1A;
  /* Tier 2 — Secondary */
  --tcc-timber: #1A4A40;
  --tcc-sandstone: #E8A84A;
  /* Tier 3 — Extended (limited use) */
  --tcc-steel-blue: #2980C4;
  --tcc-teal-patina: #00A3B4;
  --tcc-oxide: #D4650A;
  --tcc-arc: #C4387F;
  /* Tints */
  --tcc-copper-75: #B8844D; --tcc-copper-50: #CFA47A; --tcc-copper-25: #E7D1BC; --tcc-copper-10: #F3E8DE;
  --tcc-black-70: #4D4D4D;  --tcc-black-40: #999999;  --tcc-black-15: #D9D9D9;  --tcc-black-6: #F0F0F0;
  --tcc-timber-60: #4A7A6A; --tcc-timber-35: #8AB0A6; --tcc-timber-18: #C4D9D5; --tcc-timber-8: #E8F2F0;
  --tcc-sand-65: #EDBE78;   --tcc-sand-40: #F3D4A4;   --tcc-sand-20: #FAEBD2;   --tcc-sand-8: #FDF5E8;
  /* Template palette — the values in the PowerPoint template and graphic elements.
     Use only next to those graphics or when matching the template (see references/color-system.md). */
  --tcc-tpl-gold: #C88A3E;
  --tcc-tpl-green: #1F5B41;
  --tcc-tpl-teal: #007481;
  --tcc-tpl-sage: #98B8AD;

  /* Type */
  --tcc-font-display: "Oswald", "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  --tcc-font-body: "Source Sans 3", "Aptos", "Segoe UI", Arial, sans-serif;
  --tcc-font-accent: "Crimson Pro", "Century Schoolbook", Georgia, serif;

  /* Semantic */
  --tcc-bg: #FFFFFF;
  --tcc-surface: #FFFFFF;
  --tcc-panel: var(--tcc-copper-10);
  --tcc-text: var(--tcc-black);
  --tcc-muted: var(--tcc-black-70);
  --tcc-line: var(--tcc-black-15);
  --tcc-accent: var(--tcc-copper);
  --tcc-heading-2: var(--tcc-timber);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tcc-bg: #1A1A1A; --tcc-surface: #232323; --tcc-panel: #2A231D;
    --tcc-text: #F5F1EC; --tcc-muted: #B8B2AA; --tcc-line: #3A3A3A;
    --tcc-accent: #CFA47A; --tcc-heading-2: #8AB0A6;
  }
}
:root[data-theme="dark"] {
  --tcc-bg: #1A1A1A; --tcc-surface: #232323; --tcc-panel: #2A231D;
  --tcc-text: #F5F1EC; --tcc-muted: #B8B2AA; --tcc-line: #3A3A3A;
  --tcc-accent: #CFA47A; --tcc-heading-2: #8AB0A6;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--tcc-bg);
  color: var(--tcc-text);
  font-family: var(--tcc-font-body);
  font-size: 16px;
  line-height: 1.5;
}
h1, h2, h3 { font-family: var(--tcc-font-display); font-weight: 500; letter-spacing: .02em; line-height: 1.1; margin: 0 0 .4em; }
h1 { font-size: 2.5rem; text-transform: uppercase; color: var(--tcc-accent); }
h2 { font-size: 1.5rem; color: var(--tcc-heading-2); }
h3 { font-size: 1.125rem; text-transform: uppercase; color: var(--tcc-text); }
a { color: var(--tcc-accent); }
img, svg { max-width: 100%; }

/* Layout */
.tcc-page { max-width: 960px; margin: 0 auto; padding: 32px 24px 48px; }
.tcc-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px 40px; }
.tcc-columns > * + * { border-left: 1px solid var(--tcc-line); padding-left: 40px; }
@media (max-width: 640px) { .tcc-columns > * + * { border-left: 0; padding-left: 0; } }

/* Header: white bar, copper rule underneath, logo left. Use the black or copper logo here. */
.tcc-header { display: flex; align-items: center; gap: 16px; padding: 14px 24px; background: #FFFFFF; border-bottom: 3px solid var(--tcc-copper); }
.tcc-header img { height: 32px; width: auto; }
.tcc-header .tcc-app-name { font-family: var(--tcc-font-display); text-transform: uppercase; letter-spacing: .08em; font-size: .875rem; color: var(--tcc-black-70); }
/* Dark header: only with an *_on-dark logo. */
.tcc-header--dark { background: var(--tcc-black); }
.tcc-header--dark .tcc-app-name { color: #D9D9D9; }

/* Headline block: kicker, headline, short copper rule, italic intro */
.tcc-kicker { font-family: var(--tcc-font-accent); font-style: italic; font-weight: 700; font-size: 1.375rem; color: var(--tcc-accent); margin: 0; }
.tcc-rule { width: 64px; height: 3px; background: var(--tcc-copper); border: 0; margin: 16px 0 20px; }
.tcc-intro { font-style: italic; font-size: 1.0625rem; max-width: 60ch; }

/* Panel: Copper 10% field behind grouped content (sector-sheet pattern) */
.tcc-panel { background: var(--tcc-panel); padding: 24px; margin: 24px 0; }
.tcc-panel--timber { background: var(--tcc-timber-8); }
.tcc-panel--sand { background: var(--tcc-sand-8); }

/* Copper bar: section label */
.tcc-bar { background: var(--tcc-copper); color: #FFFFFF; font-family: var(--tcc-font-display); text-transform: uppercase; letter-spacing: .04em; padding: 10px 16px; margin: 24px 0 12px; }

/* Lists with copper bullets */
.tcc-list { padding-left: 1.1em; }
.tcc-list li::marker { color: var(--tcc-copper); }

/* Stats */
.tcc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; }
.tcc-stat .tcc-stat-value { font-family: var(--tcc-font-display); font-weight: 600; font-size: 2.75rem; line-height: 1; color: var(--tcc-accent); }
.tcc-stat .tcc-stat-label { font-family: var(--tcc-font-display); text-transform: uppercase; letter-spacing: .04em; font-size: .875rem; }

/* Tables: copper header row, light banding */
.tcc-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.tcc-table th { background: var(--tcc-copper); color: #FFFFFF; font-family: var(--tcc-font-display); font-weight: 500; text-transform: uppercase; letter-spacing: .03em; text-align: left; padding: 8px 12px; }
.tcc-table td { padding: 8px 12px; border-bottom: 1px solid var(--tcc-line); }
.tcc-table tbody tr:nth-child(even) td { background: var(--tcc-black-6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tcc-table tbody tr:nth-child(even) td { background: #232323; } }
.tcc-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Pull quote */
.tcc-quote { font-family: var(--tcc-font-accent); font-style: italic; font-weight: 700; font-size: 1.5rem; line-height: 1.3; color: var(--tcc-heading-2); border-left: 4px solid var(--tcc-copper); margin: 24px 0; padding: 4px 0 4px 20px; }

/* Buttons: one CTA color per layout */
.tcc-btn { display: inline-block; font-family: var(--tcc-font-display); text-transform: uppercase; letter-spacing: .04em; font-size: 1rem; padding: 10px 22px; background: var(--tcc-copper); color: #FFFFFF; border: 0; border-radius: 2px; cursor: pointer; text-decoration: none; }
.tcc-btn:disabled { opacity: .5; cursor: default; }
.tcc-btn--outline { background: transparent; color: var(--tcc-accent); box-shadow: inset 0 0 0 2px currentColor; }

/* Graphic elements: decorative, placed in a corner or margin, never behind text */
.tcc-graphic { display: block; pointer-events: none; }
.tcc-graphic--corner { position: absolute; top: 0; right: 0; width: 72px; }

/* Running footer: letterspaced caps */
.tcc-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--tcc-copper); padding: 10px 24px; font-family: var(--tcc-font-display); text-transform: uppercase; letter-spacing: .18em; font-size: .6875rem; color: var(--tcc-accent); }

/* Print / PDF: US Letter, keep brand colors */
@page { size: letter; margin: 0.6in; }
@media print {
  body { font-size: 10.5pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tcc-page { max-width: none; padding: 0; }
  .tcc-panel, .tcc-table tr, .tcc-stat, .tcc-quote { break-inside: avoid; }
  .tcc-no-print { display: none !important; }
}