/* =========================================================
   Team Cymru — Design System v1.0 (April 2026)
   Source of truth: "Team Cymru Design System + Color Palette"
   governing document. Semantic page-type color system:
   one foundation + four accent families.
   Fonts: Red Hat Display (Google Fonts, free)
   ========================================================= */

/* Red Hat Display — self-hosted (latin-ext + latin, weights 400–900) */
@font-face {
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/RedHatDisplay-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/RedHatDisplay-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ================================================================
     FOUNDATION — used on every page, every mode
     ================================================================ */
  /* Backgrounds */
  --ghost-white:    #ECEFF4;
  --page-bg-tint:   #F7F8FA;

  /* Borders, Dividers & UI Framework */
  --steel-gray:     #B0BDC8;
  --border:         #D5DDE4;

  /* Typography & Core Surfaces */
  --pure-black:     #000000;
  --dark-surface:   #1A1A1A;
  --charcoal:       #3D3D3D;
  --subdued-text:   #6B6B6B;

  /* ================================================================
     ACCENT FAMILY 1 — PLATFORM / PURESIGNAL  (Teal)
     "Live signal. Activity. Connected infrastructure."
     ================================================================ */
  --signal-teal:    #00C8BF;   /* primary CTA */
  --teal-bright:    #00E5DB;   /* hover */

  /* ================================================================
     ACCENT FAMILY 2 — TOTAL INSIGHTS FEED / DATA (Indigo / Violet)
     Use hierarchy: Indigo Core → Indigo Deep → Violet Mid →
                    Hover State → Lavender → Tint / Fill
     ================================================================ */
  --indigo-core:    #4F46E5;   /* primary CTA */
  --indigo-deep:    #3730A3;   /* deep emphasis / dark states */
  --violet-mid:     #6366F1;   /* secondary emphasis */
  --indigo-hover:   #818CF8;   /* hover */
  --lavender:       #A5B4FC;   /* soft accent */
  --indigo-tint:    #E0E7FF;   /* fill / chips / callout bg */

  /* ================================================================
     ACCENT FAMILY 3 — EVENTS / RISE / UNDERGROUND ECONOMY (Red)
     "Urgency. Momentum. Event activation."
     ================================================================ */
  --dragon-red:     #C8102E;   /* primary CTA */
  --red-hover:      #E8143A;   /* hover */
  --red-deep:       #8B0B1F;   /* deep emphasis */
  --red-pressed:    #600816;   /* pressed / active */
  --coral-alert:    #FF6B6B;   /* RESERVED: deadlines, urgency, low availability */
  --alert-tint:     #FFDEDE;   /* RESERVED: alert fills only */

  /* ================================================================
     ACCENT FAMILY 4 — RESOURCES / BLOG / REPORTS (Neutral + restrained Red)
     Foundation neutrals dominate; Dragon Red reserved for inline links,
     download CTAs, featured tags, selected filters.
     ================================================================ */
  /* (reuses foundation + --dragon-red / --red-hover) */

  /* ================================================================
     TYPOGRAPHY — Red Hat Display (exclusive brand typeface)
     ================================================================ */
  --font-sans:    'Red Hat Display', system-ui, sans-serif;
  --font-display: 'Red Hat Display', system-ui, sans-serif;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  89px;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0em;
  --tracking-caps:   0.14em;
  --tracking-huge:   0.5em;

  /* Body leading = font-size + 6pt (per Brand Guide) */
  --leading-body:  calc(var(--text-base) + 6px);

  /* ================================================================
     SPACING (4px base), RADII, SHADOWS, MOTION
     ================================================================ */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --space-32: 128px;

  --radius-sm:   4px;
  --radius-md:   8px;   /* buttons, chips, cards */
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(26,26,26,0.06);
  --shadow-md: 0 6px 20px rgba(26,26,26,0.08);
  --shadow-lg: 0 20px 48px rgba(26,26,26,0.14);

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  360ms;
}

/* ===========================================================
   PAGE-MODE SCOPES
   Add one class to <body> (or a section) to activate a mode.
   All CTAs, active states, and accents within pick up the
   correct family automatically.

   .mode-platform   → Teal
   .mode-feeds      → Indigo
   .mode-events     → Red
   .mode-resources  → Neutral + restrained Red
   =========================================================== */
.mode-platform  { --accent: var(--signal-teal); --accent-hover: var(--teal-bright); --accent-on: #00312F; --accent-tint: rgba(0,200,191,0.10); }
.mode-feeds     { --accent: var(--indigo-core);  --accent-hover: var(--indigo-hover); --accent-on: #fff; --accent-tint: var(--indigo-tint); }
.mode-events    { --accent: var(--dragon-red);   --accent-hover: var(--red-hover);    --accent-on: #fff; --accent-tint: var(--alert-tint); }
.mode-resources { --accent: var(--dragon-red);   --accent-hover: var(--red-hover);    --accent-on: #fff; --accent-tint: rgba(200,16,46,0.08); }

/* ===========================================================
   BASE / PROSE
   =========================================================== */
.tc-root, body.tc-root { font-family: var(--font-sans); color: var(--dark-surface); background: #fff; font-size: var(--text-base); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; }

.tc-display { font-family: var(--font-display); font-weight: 900; font-size: clamp(56px, 8vw, 110px); line-height: 1; letter-spacing: var(--tracking-tight); color: var(--dark-surface); text-wrap: balance; }
.tc-h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-5xl); line-height: 1.02; letter-spacing: var(--tracking-tight); color: var(--dark-surface); }
.tc-h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-4xl); line-height: 1.05; letter-spacing: var(--tracking-tight); }
.tc-h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-3xl); line-height: 1.1; }
.tc-h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: 1.2; }
.tc-eyebrow { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent, var(--dragon-red)); }
.tc-lede { font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 1.5; color: var(--charcoal); max-width: 62ch; }
.tc-p { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-base); line-height: var(--leading-body); color: var(--charcoal); }
.tc-small { font-size: var(--text-sm); line-height: 1.4; color: var(--subdued-text); }

/* ===========================================================
   BUTTONS — always mode-aware.
   .tc-btn-primary uses the active mode's --accent
   =========================================================== */
.tc-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-weight: 800; font-size: 15px; padding: 13px 22px; border-radius: var(--radius-md); border: 0; cursor: pointer; text-decoration: none; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.tc-btn-primary   { background: var(--accent, var(--dark-surface)); color: var(--accent-on, #fff); }
.tc-btn-primary:hover { background: var(--accent-hover, var(--charcoal)); }
.tc-btn-primary:active { transform: scale(0.98); }
.tc-btn-dark      { background: var(--dark-surface); color: #fff; }
.tc-btn-dark:hover{ background: var(--charcoal); }
.tc-btn-outline   { background: transparent; color: var(--dark-surface); box-shadow: inset 0 0 0 1.5px var(--dark-surface); }
.tc-btn-outline:hover { background: var(--dark-surface); color: #fff; }
.tc-btn-ghost     { background: transparent; color: var(--accent, var(--dark-surface)); }
.tc-btn-ghost:hover { background: var(--accent-tint); }
.tc-btn:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--dragon-red)) 35%, transparent); }

/* Link style — accent-colored inline link */
.tc-link { color: var(--accent, var(--dragon-red)); font-weight: 700; text-decoration: none; border-bottom: 1.5px solid currentColor; }
.tc-link:hover { color: var(--accent-hover, var(--red-hover)); }

/* ===========================================================
   CHIPS / TAGS / FILTERS
   =========================================================== */
.tc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--ghost-white); color: var(--charcoal); }
.tc-chip--accent { background: var(--accent-tint); color: var(--accent); }
.tc-chip--selected { background: var(--accent); color: var(--accent-on); }

/* ===========================================================
   CARDS
   =========================================================== */
.tc-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; }
.tc-card--accent-top { border-top: 3px solid var(--accent); }
.tc-card--accent-bar { border-left: 3px solid var(--accent); }
.tc-card--tint { background: var(--accent-tint); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); }

/* ===========================================================
   ALERTS — reserved
   =========================================================== */
.tc-alert { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--alert-tint); color: var(--red-deep); font-weight: 600; font-size: 14px; }
.tc-alert b { color: var(--dragon-red); }

/* ===========================================================
   FORM CONTROLS
   =========================================================== */
.tc-input { font-family: var(--font-sans); font-size: 15px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-md); background: #fff; color: var(--dark-surface); outline: none; transition: border var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.tc-input:focus { border-color: var(--accent, var(--dark-surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--dark-surface)) 15%, transparent); }

/* ===========================================================
   TAB STATES (inherit dominant accent family)
   =========================================================== */
.tc-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--ghost-white); border-radius: var(--radius-md); }
.tc-tab { padding: 8px 14px; border-radius: 6px; font-weight: 700; font-size: 14px; color: var(--subdued-text); background: transparent; cursor: pointer; border: 0; }
.tc-tab[aria-selected="true"] { background: #fff; color: var(--accent, var(--dark-surface)); box-shadow: var(--shadow-sm); }