/* ============================================================
   GRIME SCENE UNIT — colors_and_type.css
   Core tokens: color, type, spacing, radii, shadow, motion.
   Vibe: caution-tape yellow + crime-scene black + dumpster green.
   ============================================================ */

/* ----- Webfonts (Google Fonts substitutions; flag for review) ----- */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Staatliches&family=Special+Elite&family=Inter:wght@400;500;600;700;800&family=Archivo+Black&display=swap');

:root {
  /* ===== BRAND COLORS ===== */
  --gsu-yellow:        #FFC72C;   /* caution-tape yellow — primary brand */
  --gsu-yellow-deep:   #E0A800;   /* shadow / pressed yellow */
  --gsu-yellow-soft:   #FFE082;   /* highlight tint */

  --gsu-black:         #0E0E0E;   /* near-black; outlines, type */
  --gsu-ink:           #1A1A1A;   /* large surfaces */
  --gsu-asphalt:       #2A2A2A;   /* secondary dark */

  --gsu-green:         #4A5D23;   /* olive/military green — mascot body */
  --gsu-green-deep:    #2F3D14;   /* deep shadow green */
  --gsu-green-bright:  #6B8E23;   /* fresh-clean accent */

  --gsu-bone:          #F4F1E8;   /* off-white paper / "evidence bag" */
  --gsu-concrete:      #D9D6CE;   /* warm gray surface */
  --gsu-concrete-2:    #B7B3A8;
  --gsu-concrete-3:    #6E6A60;

  --gsu-blood:         #B0241F;   /* warning / danger red */
  --gsu-suds:          #7DB9D6;   /* soapy water blue accent */

  /* ===== SEMANTIC SURFACES ===== */
  --bg:                var(--gsu-bone);
  --bg-alt:            var(--gsu-concrete);
  --bg-dark:           var(--gsu-ink);
  --bg-tape:           var(--gsu-yellow);

  --surface:           #FFFFFF;
  --surface-dark:      var(--gsu-asphalt);
  --surface-card:      #FFFFFF;

  /* ===== SEMANTIC TEXT ===== */
  --fg1:               var(--gsu-black);     /* primary text */
  --fg2:               #3A3A3A;              /* secondary text */
  --fg3:               #6E6A60;              /* tertiary / meta */
  --fg-inv:            var(--gsu-bone);      /* on-dark text */
  --fg-on-yellow:      var(--gsu-black);
  --fg-link:           var(--gsu-green-deep);

  /* ===== BORDERS ===== */
  --border:            var(--gsu-black);     /* heavy black hairline */
  --border-soft:       rgba(14,14,14,0.18);
  --border-dashed:     var(--gsu-black);

  /* ===== STATE ===== */
  --success:           var(--gsu-green-bright);
  --warning:           var(--gsu-yellow);
  --danger:            var(--gsu-blood);
  --info:              var(--gsu-suds);

  /* ===== TYPE — FAMILIES ===== */
  /* Display:  Anton — heavy condensed, stands in for the grunge wordmark face.
     Heading:  Staatliches — tall poster sans, second-tier.
     Stencil/Forensic: Special Elite — typewriter feel for "evidence" / labels.
     Body:     Inter — utility sans for product UI.
     Black:    Archivo Black — tight chunky weight when Anton is too narrow. */
  --font-display:  'Anton', 'Oswald', 'Impact', system-ui, sans-serif;
  --font-heading:  'Staatliches', 'Oswald', 'Impact', system-ui, sans-serif;
  --font-stencil:  'Special Elite', 'Courier New', monospace;
  --font-body:     'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-chunk:    'Archivo Black', 'Inter', system-ui, sans-serif;
  --font-mono:     'Special Elite', ui-monospace, 'SF Mono', monospace;

  /* ===== TYPE — SCALE (px @ 16px base) ===== */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;

  /* ===== SPACING (4px grid) ===== */
  --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;

  /* ===== RADII — sparing; brand favors hard edges + subtle rounding ===== */
  --r-0:   0px;
  --r-1:   2px;     /* hairline rounding */
  --r-2:   4px;     /* default card */
  --r-3:   8px;     /* buttons */
  --r-4:   12px;
  --r-pill: 999px;

  /* ===== SHADOWS — chunky, offset, "sticker" feel ===== */
  --shadow-sticker:  3px 3px 0 0 var(--gsu-black);          /* hard offset, no blur */
  --shadow-sticker-lg: 6px 6px 0 0 var(--gsu-black);
  --shadow-card:     0 2px 0 0 rgba(14,14,14,0.9), 0 6px 16px rgba(14,14,14,0.18);
  --shadow-soft:     0 4px 14px rgba(14,14,14,0.12);
  --shadow-inset:    inset 0 -3px 0 0 var(--gsu-yellow-deep);

  /* ===== MOTION ===== */
  --ease-stamp:   cubic-bezier(.2,.9,.2,1.2);   /* punchy, a little overshoot */
  --ease-out:     cubic-bezier(.2,.7,.2,1);
  --dur-fast:     120ms;
  --dur-base:     200ms;
  --dur-slow:     360ms;

  /* ===== Z ===== */
  --z-tape:    10;
  --z-nav:     50;
  --z-modal:   100;
}

/* ============================================================
   BASE TYPE — semantic element styles
   ============================================================ */
html { font-family: var(--font-body); color: var(--fg1); background: var(--bg); }
body { font-family: var(--font-body); font-size: var(--fs-16); line-height: 1.5; color: var(--fg1); }

h1, .h1 {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6vw, var(--fs-96));
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--fg1);
  margin: 0 0 var(--sp-5);
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, var(--fs-72));
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 var(--sp-4);
}
h3, .h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-32);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 var(--sp-3);
}
h4, .h4 {
  font-family: var(--font-heading);
  font-size: var(--fs-24);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 var(--sp-3);
}
h5, .h5 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-18);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 var(--sp-2);
}

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

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

.eyebrow {
  font-family: var(--font-stencil);
  font-size: var(--fs-12);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg3);
}

.label-stencil {
  font-family: var(--font-stencil);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

code, .code, pre {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  background: var(--gsu-bone);
  border: 1px solid var(--border-soft);
  padding: 0.1em 0.35em;
  border-radius: var(--r-1);
}

a {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover { color: var(--gsu-black); background: var(--gsu-yellow); }

/* ============================================================
   SIGNATURE TREATMENTS
   ============================================================ */

/* Caution-tape stripes background */
.gsu-tape {
  background: repeating-linear-gradient(
    -45deg,
    var(--gsu-yellow) 0 22px,
    var(--gsu-black) 22px 32px
  );
  color: var(--gsu-black);
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Solid yellow tape with text on top */
.gsu-tape-solid {
  background: var(--gsu-yellow);
  color: var(--gsu-black);
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-top: 2px solid var(--gsu-black);
  border-bottom: 2px solid var(--gsu-black);
}

/* Evidence-bag paper texture surface */
.gsu-paper {
  background: var(--gsu-bone);
  background-image:
    radial-gradient(rgba(14,14,14,0.04) 1px, transparent 1px),
    radial-gradient(rgba(14,14,14,0.03) 1px, transparent 1px);
  background-size: 8px 8px, 13px 13px;
  background-position: 0 0, 4px 6px;
}

/* Sticker card: hard black border + offset shadow */
.gsu-sticker {
  background: var(--surface);
  border: 2px solid var(--gsu-black);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-sticker);
}
.gsu-sticker-lg {
  border: 3px solid var(--gsu-black);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-sticker-lg);
}

/* Stencil divider */
.gsu-divider {
  border: none;
  border-top: 2px dashed var(--gsu-black);
  margin: var(--sp-5) 0;
}