/* =========================================================================
   Yellowhat Design System — Colors & Type
   =========================================================================

   Yellowhat is a hybrid event brand centered on Microsoft Security. Visual
   DNA: construction-site yellow + hard-hat + ninja-cat. High contrast,
   stencil/industrial type, warning-tape accents, gritty textures.

   Fonts: Loaded via Google Fonts CDN. If you want fully offline, swap the
   @import below for locally hosted files.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Oswald:wght@400;500;600;700&family=Barlow:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---------------------------------------------------------------------
     CORE BRAND COLORS
     --------------------------------------------------------------------- */

  /* Yellowhat Yellow — the hero color. Construction-hat / warning-tape. */
  --yh-yellow:          #F5B921;   /* Primary brand yellow */
  --yh-yellow-deep:     #D99A0E;   /* Darker / pressed state */
  --yh-yellow-soft:     #F8CC4C;   /* Hover / highlight */
  --yh-yellow-pale:     #FFE9A8;   /* Tint backgrounds */
  --yh-amber-shadow:    #8A5A00;   /* Logo drop-shadow / burnt edge */

  /* Slate / Dark — the ninjacat's armor. Ranges from charcoal to navy. */
  --yh-ink:             #14161A;   /* Near-black, base dark */
  --yh-slate-900:       #1B1F26;   /* Primary dark surface */
  --yh-slate-800:       #262A32;
  --yh-slate-700:       #353A44;
  --yh-slate-600:       #4A515D;
  --yh-slate-500:       #6B7280;
  --yh-slate-400:       #9AA1AD;
  --yh-slate-300:       #C4C9D2;
  --yh-slate-200:       #E2E5EA;
  --yh-slate-100:       #F1F3F6;
  --yh-bone:            #FAFAF7;   /* Off-white — paper, cracked wall */

  /* Warning-tape accents (hazard-stripe pattern uses these two) */
  --yh-tape-yellow:     #F5B921;
  --yh-tape-black:      #1B1F26;

  /* ---------------------------------------------------------------------
     SEMANTIC COLORS (status / alert)
     --------------------------------------------------------------------- */
  --yh-danger:          #E03131;   /* Critical / breach */
  --yh-danger-soft:     #FDECEC;
  --yh-warn:            #F5B921;   /* Warning — reuses brand yellow */
  --yh-warn-soft:       #FFF4D3;
  --yh-ok:              #2FB673;   /* Secure / passed */
  --yh-ok-soft:         #E3F7EC;
  --yh-info:            #3B82F6;   /* Microsoft-blue adjacent */
  --yh-info-soft:       #E7F0FE;

  /* ---------------------------------------------------------------------
     FOREGROUND / BACKGROUND TOKENS
     --------------------------------------------------------------------- */
  --fg1:                var(--yh-ink);
  --fg2:                var(--yh-slate-700);
  --fg3:                var(--yh-slate-500);
  --fg-inverse:         var(--yh-bone);
  --fg-accent:          var(--yh-yellow);

  --bg-page:            var(--yh-bone);
  --bg-surface:         #FFFFFF;
  --bg-muted:           var(--yh-slate-100);
  --bg-dark:            var(--yh-slate-900);
  --bg-ink:             var(--yh-ink);
  --bg-accent:          var(--yh-yellow);

  --border-1:           var(--yh-slate-200);
  --border-2:           var(--yh-slate-300);
  --border-strong:      var(--yh-slate-900);

  /* ---------------------------------------------------------------------
     TYPOGRAPHY FAMILIES
     --------------------------------------------------------------------- */
  --font-logo:      'Black Ops One', 'Rubik Mono One', 'Impact', system-ui, sans-serif;
  --font-display:   'Oswald', 'Barlow Condensed', 'Impact', system-ui, sans-serif;
  --font-body:      'Barlow', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Consolas, monospace;

  /* ---------------------------------------------------------------------
     TYPE SCALE (fluid-ish, rem-based, 16px root)
     --------------------------------------------------------------------- */
  --fs-xs:    0.75rem;   /* 12 */
  --fs-sm:    0.875rem;  /* 14 */
  --fs-base:  1rem;      /* 16 */
  --fs-md:    1.125rem;  /* 18 */
  --fs-lg:    1.25rem;   /* 20 */
  --fs-xl:    1.5rem;    /* 24 */
  --fs-2xl:   2rem;      /* 32 */
  --fs-3xl:   2.75rem;   /* 44 */
  --fs-4xl:   3.75rem;   /* 60 */
  --fs-5xl:   5rem;      /* 80 */
  --fs-hero:  7rem;      /* 112 — logo-scale */

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  --ls-tight:  -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-wider:   0.1em;
  --ls-widest:  0.2em;

  /* ---------------------------------------------------------------------
     SPACING, RADII, SHADOWS, ELEVATION
     --------------------------------------------------------------------- */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10:  128px;

  /* Radii — Yellowhat runs SHARP. Keep radii minimal; brand is industrial. */
  --radius-0:  0;
  --radius-1:  2px;     /* default for inputs / small chips */
  --radius-2:  4px;     /* buttons */
  --radius-3:  8px;     /* cards */
  --radius-4:  12px;    /* large surfaces */
  --radius-pill: 999px; /* tags, status pills */

  /* Shadows — high contrast, offset, poster-like. No soft blurs. */
  --shadow-hard:   4px 4px 0 0 var(--yh-ink);
  --shadow-hard-sm: 2px 2px 0 0 var(--yh-ink);
  --shadow-card:   0 2px 0 0 rgba(20,22,26,0.08), 0 8px 24px -8px rgba(20,22,26,0.2);
  --shadow-pop:    0 12px 32px -8px rgba(20,22,26,0.35);
  --shadow-inset-dark: inset 0 0 0 1px rgba(255,255,255,0.06);

  /* Warning-tape stripe pattern (use as background-image) */
  --tape-stripes: repeating-linear-gradient(
    -45deg,
    var(--yh-tape-yellow) 0 18px,
    var(--yh-tape-black) 18px 36px
  );

  /* Amber glow — from stage banner lighting */
  --glow-amber: radial-gradient(ellipse at center, rgba(245,185,33,0.55) 0%, rgba(245,185,33,0) 60%);

  /* Transitions — crisp, no bouncy eases. Cyber/tech feel. */
  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:   cubic-bezier(0.6, 0, 0.8, 0.2);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  400ms;
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES
   Use directly, or compose via .yh-h1 etc.
   ========================================================================= */

html, body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.yh-logotype, h1.yh-logotype {
  font-family: var(--font-logo);
  font-size: var(--fs-hero);
  line-height: 1;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--yh-yellow);
  text-shadow:
    2px 2px 0 var(--yh-amber-shadow),
    4px 4px 0 rgba(0,0,0,0.6);
}

h1, .yh-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--fg1);
  margin: 0 0 var(--sp-5);
}

h2, .yh-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--fg1);
  margin: 0 0 var(--sp-4);
}

h3, .yh-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--fg1);
  margin: 0 0 var(--sp-3);
}

h4, .yh-h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  color: var(--fg1);
  margin: 0 0 var(--sp-3);
}

.yh-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--fg-accent);
}

p, .yh-p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg2);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}

.yh-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: var(--lh-base);
  color: var(--fg1);
}

small, .yh-small {
  font-size: var(--fs-sm);
  color: var(--fg3);
}

code, kbd, samp, pre, .yh-code {
  font-family: var(--font-mono);
  font-size: 0.925em;
  color: var(--fg1);
}
code {
  background: var(--yh-slate-100);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-1);
}

a, .yh-link {
  color: var(--fg1);
  text-decoration-color: var(--yh-yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover, .yh-link:hover {
  color: var(--yh-yellow-deep);
}

::selection {
  background: var(--yh-yellow);
  color: var(--yh-ink);
}

/* Dark surface helpers */
.yh-on-dark {
  background: var(--bg-dark);
  color: var(--fg-inverse);
}
.yh-on-dark p, .yh-on-dark .yh-p { color: var(--yh-slate-300); }
.yh-on-dark h1, .yh-on-dark h2, .yh-on-dark h3, .yh-on-dark h4 { color: var(--fg-inverse); }