/* ============================================================
   HYPER HURDLE — Design Foundations
   colors_and_type.css
   Off-season FTC competition hosted by Hype-Birds (FTC #16818)
   Tone: clean & official, modernized. Navy + ink + one energetic accent.
   ============================================================ */

/* Type — Archivo family matches the heavy geometric wordmark.
   Loaded from Google Fonts; see README for self-host notes. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Archivo+Black&family=Archivo+Expanded:wght@600;700;800&display=swap');

:root {
  /* ---------- BRAND CORE ---------- */
  --hh-ink:        #15181E;  /* logo black — primary text & wordmark */
  --hh-navy:       #16315E;  /* authority blue — primary actions, headers */
  --hh-navy-700:   #0F244A;  /* navy hover */
  --hh-navy-800:   #0B1B38;  /* navy pressed / deep bg */
  --hh-navy-050:   #EAF0F8;  /* navy tint — selected rows, soft fills */

  /* Energetic accent — the "Hyper" pop. Default = signal orange (track/athletics).
     Swap --hh-accent to retheme (electric blue #1F6FFF, lime #5BBF1F). */
  --hh-accent:     #FF5A1F;
  --hh-accent-600: #E8470F;
  --hh-accent-050: #FFF0EA;

  /* ---------- NEUTRALS ---------- */
  --hh-page:       #F4F6F9;  /* app background */
  --hh-surface:    #FFFFFF;  /* cards, panels */
  --hh-surface-2:  #F8FAFC;  /* subtle inset / striped rows */
  --hh-surface-3:  #EEF1F5;  /* table header, chip bg */
  --hh-border:     #E2E6EC;  /* hairline dividers, card borders */
  --hh-border-2:   #CBD2DC;  /* stronger borders, inputs */

  /* ---------- TEXT ---------- */
  --fg1: #15181E;  /* primary */
  --fg2: #4A5260;  /* secondary / labels */
  --fg3: #79828F;  /* muted / meta */
  --fg-link: #1A4F9E; /* hyperlink blue (table links) */
  --fg-on-dark: #FFFFFF;
  --fg-on-dark-2: #B9C4D6;

  /* ---------- SEMANTIC ---------- */
  --ok:    #15835A;  --ok-bg:   #E7F4EE;
  --warn:  #B5790A;  --warn-bg: #FBF1DC;
  --err:   #C0291F;  --err-bg:  #FBE9E7;
  --info:  #1A4F9E;  --info-bg: #E8F0FB;

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: 'Archivo Black', 'Archivo', system-ui, sans-serif;
  --font-display-exp: 'Archivo Expanded', 'Archivo', system-ui, sans-serif;
  --font-ui: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num: 'Archivo', system-ui, sans-serif; /* use with tabular-nums */

  /* ---------- SPACING (4px base) ---------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-7: 32px;  --space-8: 40px;
  --space-9: 48px;  --space-10: 64px;

  /* ---------- RADII (modernized vs FIRST's square chrome) ---------- */
  --r-xs: 3px;  --r-sm: 5px;  --r-md: 8px;  --r-lg: 12px;  --r-xl: 16px;  --r-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --shadow-1: 0 1px 2px rgba(21,24,30,.06), 0 1px 1px rgba(21,24,30,.04);
  --shadow-2: 0 2px 6px rgba(21,24,30,.07), 0 1px 2px rgba(21,24,30,.05);
  --shadow-3: 0 8px 24px rgba(15,36,74,.12), 0 2px 6px rgba(21,24,30,.06);
  --shadow-pop: 0 16px 40px rgba(11,27,56,.20);
  --ring: 0 0 0 3px rgba(22,49,94,.18); /* focus ring (navy) */
  --ring-accent: 0 0 0 3px rgba(255,90,31,.22);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(.2,.7,.3,1);
  --dur: 160ms;
}

/* ============================================================
   SEMANTIC TYPE ROLES
   ============================================================ */
.hh-wordmark { font-family: var(--font-display); font-weight: 400; letter-spacing: -.01em; text-transform: uppercase; line-height: .92; }

.hh-display   { font-family: var(--font-display); font-weight: 400; font-size: 44px; line-height: 1.02; letter-spacing: -.015em; color: var(--fg1); text-transform: uppercase; }
.hh-h1        { font-family: var(--font-ui); font-weight: 800; font-size: 30px; line-height: 1.12; letter-spacing: -.01em; color: var(--fg1); }
.hh-h2        { font-family: var(--font-ui); font-weight: 700; font-size: 22px; line-height: 1.2;  letter-spacing: -.005em; color: var(--fg1); }
.hh-h3        { font-family: var(--font-ui); font-weight: 700; font-size: 18px; line-height: 1.25; color: var(--fg1); }
.hh-eyebrow   { font-family: var(--font-ui); font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--fg3); }
.hh-body      { font-family: var(--font-ui); font-weight: 400; font-size: 15px; line-height: 1.5; color: var(--fg2); }
.hh-body-sm   { font-family: var(--font-ui); font-weight: 400; font-size: 13px; line-height: 1.45; color: var(--fg2); }
.hh-label     { font-family: var(--font-ui); font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: .01em; color: var(--fg2); }
.hh-meta      { font-family: var(--font-ui); font-weight: 500; font-size: 12px; line-height: 1.3; color: var(--fg3); }
.hh-num       { font-family: var(--font-num); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* ============================================================
   PRIMITIVES (optional helpers used across kits)
   ============================================================ */
*{ box-sizing: border-box; }

.hh-btn {
  font-family: var(--font-ui); font-weight: 700; font-size: 13px; letter-spacing: .02em;
  text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--r-sm); border: 1px solid transparent;
  cursor: pointer; transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  white-space: nowrap; line-height: 1;
}
.hh-btn:active { transform: translateY(1px); }
.hh-btn:focus-visible { outline: none; box-shadow: var(--ring); }

.hh-btn--primary { background: var(--hh-navy); color: #fff; }
.hh-btn--primary:hover { background: var(--hh-navy-700); }
.hh-btn--accent  { background: var(--hh-accent); color: #fff; }
.hh-btn--accent:hover { background: var(--hh-accent-600); }
.hh-btn--accent:focus-visible { box-shadow: var(--ring-accent); }
.hh-btn--ghost   { background: #fff; color: var(--hh-navy); border-color: var(--hh-border-2); }
.hh-btn--ghost:hover { background: var(--hh-surface-2); border-color: var(--hh-navy); }
.hh-btn--muted   { background: #9AA3AF; color: #fff; } /* FIRST-style grey pills */
.hh-btn--muted:hover { background: #828C99; }

.hh-card {
  background: var(--hh-surface); border: 1px solid var(--hh-border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}

.hh-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border-radius: var(--r-pill); font-family: var(--font-ui); font-weight: 600; font-size: 12px;
  background: var(--hh-surface-3); color: var(--fg2); white-space: nowrap;
}
.hh-chip--ok  { background: var(--ok-bg);  color: var(--ok); }
.hh-chip--warn{ background: var(--warn-bg);color: var(--warn); }
.hh-chip--err { background: var(--err-bg); color: var(--err); }
.hh-chip--info{ background: var(--info-bg);color: var(--info); }

.hh-input {
  font-family: var(--font-ui); font-size: 14px; color: var(--fg1);
  height: 42px; padding: 0 12px; width: 100%;
  background: #fff; border: 1px solid var(--hh-border-2); border-radius: var(--r-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hh-input::placeholder { color: var(--fg3); }
.hh-input:focus { outline: none; border-color: var(--hh-navy); box-shadow: var(--ring); }

/* Q&A app additions over the official Hyper Hurdle tokens. */
.hh-btn { text-decoration: none; }
.hh-btn--sm { padding: 7px 12px; font-size: 12px; }
textarea.hh-input {
  height: auto;
  min-height: 128px;
  padding: 10px 12px;
  line-height: 1.5;
  resize: vertical;
}
.hh-table { width: 100%; border-collapse: collapse; }
.hh-table thead tr { background: var(--hh-surface-3); }
.hh-table th {
  font-family: var(--font-ui); font-weight: 700; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg3);
  padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--hh-border);
}
.hh-table td {
  padding: 12px 14px; border-bottom: 1px solid var(--hh-border);
  font-family: var(--font-ui); font-size: 14px; color: var(--fg1);
}
.hh-table tbody tr:hover { background: var(--hh-navy-050); }
.hh-table tbody tr:last-child td { border-bottom: none; }
.hh-card--hoverable:hover { box-shadow: var(--shadow-2); border-color: var(--hh-navy); }
.hh-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 760px) { .hh-form-grid { grid-template-columns: 1fr; } }

/* Phase 2: manual auto-linking */
.hh-rule-link {
  color: var(--hh-navy);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: var(--hh-accent);
  text-underline-offset: 3px;
}
.hh-rule-link:hover { color: var(--hh-accent); }
.hh-linked-copy .hh-rule-link {
  display: inline;
  padding: 0 .1em;
  border-radius: 4px;
  background: rgba(255, 90, 31, .08);
}
.hh-linked-copy .hh-rule-link:hover { background: rgba(255, 90, 31, .14); }