/* ==========================================================================
   Toughcore Software — brand tokens (handoff CSS, not a website)
   For Sir Webs-a-Lot. Drop-in variables + a few base classes.
   Fonts: load from Google Fonts (official) by adding this to <head>:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Chivo:wght@700&family=Noto+Sans:wght@400;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
   (Or self-host the unmodified OFL font files in ../08-fonts-and-licenses/, keeping each OFL.txt.)
   ========================================================================== */
:root {
  /* Palette (from the Toughcore brand pack) */
  --tc-core-orange:   #FF3300; /* accent: rules, key buttons, active states — use sparingly */
  --tc-data-blue:     #00E5FF; /* secondary UI on dark: links/focus/status — never body text on white */
  --tc-steel-grey:    #7D84B2; /* secondary text/borders on dark; large text only on white */
  --tc-deep-charcoal: #1A1A24; /* dark surfaces; body text on light */
  --tc-alloy-silver:  #DCDCDC; /* primary text on dark; hairlines on light */
  --tc-muted:         #4A4E5D; /* secondary text on light (taken from the logo steel gradient) */
  --tc-white:         #FFFFFF;

  /* Type roles */
  --tc-font-display: 'Orbitron', 'Segoe UI', Arial, sans-serif;     /* brand display/headlines, weight 700–900, uppercase */
  --tc-font-subtitle: 'Chivo', 'Segoe UI', Arial, sans-serif;       /* subtitles/eyebrows, weight 700, tracked */
  --tc-font-body: 'Noto Sans', 'Segoe UI', Roboto, Arial, sans-serif; /* all prose and UI copy */
  --tc-font-tech: 'Share Tech Mono', ui-monospace, Consolas, monospace; /* technical values only: versions, codes, hex values */

  --tc-radius: 6px;
  --tc-rule: 2px solid var(--tc-core-orange);
}

/* Logotype-style heading (text version; prefer the SVG logo files for the actual logo) */
.tc-display { font-family: var(--tc-font-display); font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.tc-subtitle { font-family: var(--tc-font-subtitle); font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--tc-core-orange); }
.tc-body { font-family: var(--tc-font-body); font-size: 1rem; line-height: 1.6; }
.tc-tech { font-family: var(--tc-font-tech); }

/* Dark theme (suggested for the landing page hero) */
.tc-theme-dark { background: var(--tc-deep-charcoal); color: var(--tc-alloy-silver); }
.tc-theme-dark a { color: var(--tc-data-blue); }
.tc-theme-dark .tc-muted { color: var(--tc-steel-grey); }

/* Light theme (documents, long reading) */
.tc-theme-light { background: var(--tc-white); color: var(--tc-deep-charcoal); }
.tc-theme-light a { color: var(--tc-deep-charcoal); text-decoration-color: var(--tc-core-orange); }
.tc-theme-light .tc-muted { color: var(--tc-muted); }

.tc-button { font-family: var(--tc-font-body); font-weight: 700; background: var(--tc-core-orange); color: var(--tc-deep-charcoal); border: 0; border-radius: var(--tc-radius); padding: 0.75em 1.25em; }
.tc-rule { border: 0; border-top: var(--tc-rule); }

/* Restraint: a subtle glow is allowed on the dark hero logo only. No pulsing/animated blue decoration. */
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }