/* ============================================================
   HYPER HURDLE — Design Tokens
   public/css/hh-tokens.css
   Off-season FTC competition hosted by Hype-Birds (FTC #16818)
   Import this file first in every Blade layout.
   ============================================================ */

@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     */

  /* Signal orange — accent only, never a base color */
  --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  */
  --hh-surface-3:  #EEF1F5;   /* table header, chip bg   */
  --hh-border:     #E2E6EC;   /* hairline dividers       */
  --hh-border-2:   #CBD2DC;   /* stronger borders/inputs */

  /* ── TEXT ───────────────────────────────────────────────── */
  --fg1:         #15181E;   /* primary                 */
  --fg2:         #4A5260;   /* secondary / labels      */
  --fg3:         #79828F;   /* muted / meta            */
  --fg-link:     #1A4F9E;   /* hyperlink blue          */
  --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; /* pair with tabular-nums */

  /* ── SPACING (4 px 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 ───────────────────────────────────────────────── */
  --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 — navy  */
  --ring-accent: 0 0 0 3px rgba(255,90,31,.22);  /* focus — orange */

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

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* ============================================================
   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
   ============================================================ */

/* Buttons */
.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; text-decoration: none;
}
.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; }
.hh-btn--muted:hover { background: #828C99; }
.hh-btn--sm          { padding: 7px 12px; font-size: 12px; }

/* Cards */
.hh-card {
  background: var(--hh-surface); border: 1px solid var(--hh-border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
.hh-card--hover {
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hh-card--hover:hover {
  box-shadow: var(--shadow-2); border-color: var(--hh-navy);
}

/* Status chips */
.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-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* Inputs */
.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);
}
textarea.hh-input {
    height: auto;
    min-height: 92px;
    padding: 10px 12px;
    line-height: 1.5;
    resize: vertical;
}
.hh-input::placeholder { color: var(--fg3); }
.hh-input:focus  { outline: none; border-color: var(--hh-navy); box-shadow: var(--ring); }
.hh-input:invalid{ border-color: var(--err); }

/* Tables */
.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; }