/* =====================================================================
   5SDS — The 5S Design System
   "Spend like you give a f*ck."
   Aesthetic: Xerox Black-Bloc (anarchist zine / stencil / photocopy)
   ---------------------------------------------------------------------
   FIRST-DRAFT TOKENS. Generated to be refined with a designer.
   Two layers share one ink:
     STREET    — brand / marketing / manifesto / zine. Maximum DIY.
     WORKBENCH — the product (directory, map, swap board, timebank).
                 Same ink, disciplined + accessible (AA).
   ===================================================================== */

:root {

  /* ---------------------------------------------------------------
     CORE PALETTE — "Hazard". Black + paper + TWO earned accents:
     Shock Red (act / alarm) and Caution Amber (flag / circulate).
     No blue, ever. The discipline is the brand.
     --------------------------------------------------------------- */
  --5s-black:        #0B0B0B;   /* Xerox Black — all ink, type, borders, illos */
  --5s-paper:        #F6F3EA;   /* Photocopy White — the default ground */
  --5s-newsprint:    #ECE7D6;   /* Newsprint — secondary, grubbier paper */
  --5s-red:          #E0241F;   /* Shock Red — accent #1. Blood + alarm. */
  --5s-white:        #FFFFFF;   /* Clean white — workbench surfaces only */

  /* Red has two jobs and two values so text stays AA-legible:
     --5s-red       on light: fine for FILLS, large/bold type, icons.
     --5s-red-ink   on light: darker, for RED TEXT at body sizes (≥4.5:1). */
  --5s-red-ink:      #B81A16;
  --5s-red-press:    #A8160F;   /* pressed/active state of a red fill */

  /* Caution Amber — accent #2, the hazard-tape yellow already in the stripes.
     A FILL/HIGHLIGHT color: flags, tape, "new", circulate. Black text on it.
     Never amber text on light (use --5s-amber-ink only where unavoidable). */
  --5s-amber:        #F2B400;
  --5s-amber-ink:    #8A6500;

  /* ---------------------------------------------------------------
     INK SCALE (neutrals) — derived from black, for WORKBENCH UI only.
     The street layer almost never uses gray; it's black or it's paper.
     --------------------------------------------------------------- */
  --5s-ink-90:  #1C1A17;
  --5s-ink-70:  #3D3A34;
  --5s-ink-50:  #6E6A60;   /* "smudge" — halftone mid, muted captions */
  --5s-ink-30:  #A6A299;
  --5s-ink-15:  #D7D2C6;   /* hairlines on paper */
  --5s-ink-08:  #E7E2D6;   /* low-emphasis fills / zebra rows */

  /* ---------------------------------------------------------------
     SEMANTIC / STATE — desaturated to live next to the grain.
     Use sparingly. Danger is Shock Red; warning is Caution Amber.
     Success keeps a single muted green (functional only — not a brand color).
     --------------------------------------------------------------- */
  --5s-success:      #2E7D32;
  --5s-success-ink:  #1E5E22;
  --5s-warning:      var(--5s-amber);
  --5s-warning-ink:  var(--5s-amber-ink);
  --5s-danger:       var(--5s-red);
  --5s-danger-ink:   var(--5s-red-ink);

  /* ---------------------------------------------------------------
     THE 5 VERBS — told apart by SYMBOL (assets/symbols/*.svg), NOT a
     rainbow. Each carries ONE of the two Hazard accents by role:
       RED   = commit  (money out / solidarity):  Spend, Support
       AMBER = circulate (keep / trade / give):    Save, Swap, Share
     Symbols are black-first; the accent is a small flag, never the
     only signal (accessibility). No per-verb hues. No blue.
     --------------------------------------------------------------- */
  --verb-spend:    var(--5s-red);    /* storefront — directory / shop local */
  --verb-support:  var(--5s-red);    /* raised fist — solidarity */
  --verb-save:     var(--5s-amber);  /* recirculate — local multiplier */
  --verb-swap:     var(--5s-amber);  /* exchange    — barter / timebank */
  --verb-share:    var(--5s-amber);  /* gift box    — buy-nothing */

  /* ---------------------------------------------------------------
     SURFACES (semantic aliases)
     --------------------------------------------------------------- */
  --bg-street:        var(--5s-black);    /* hero / manifesto ground */
  --bg-paper:         var(--5s-paper);    /* default page */
  --bg-newsprint:     var(--5s-newsprint);
  --bg-workbench:     var(--5s-white);    /* data-dense product surface */
  --ink:              var(--5s-black);
  --ink-on-dark:      var(--5s-paper);

  /* ---------------------------------------------------------------
     TYPE — Saira Stencil (display, the brand's voice) / Poppins (the
     accessible workhorse: body, UI, AND all eyebrows/labels/metadata)
     / Archivo Black (heavy sub-display) / Permanent Marker (1 word).
     Special Elite is a SPARING FLAVOR ONLY — typewriter "field notes"
     at readable size (≥13px). It is NOT the label font: it's too rough
     to read at small sizes, so labels use Poppins. Self-host in prod.
     --------------------------------------------------------------- */
  --font-stencil: "Saira Stencil One", "Archivo Black", system-ui, sans-serif;
  --font-heavy:   "Archivo Black", "Poppins", system-ui, sans-serif;
  --font-body:    "Poppins", system-ui, -apple-system, sans-serif;
  --font-label:   "Poppins", system-ui, sans-serif;          /* eyebrows / labels / meta */
  --font-type:    "Special Elite", "Courier New", monospace; /* flavor "field notes" only */
  --font-marker:  "Permanent Marker", cursive;               /* 1 accent word */

  /* Type scale (px) — same spine as the LMC system */
  --t-64: 64px; --t-48: 48px; --t-36: 36px; --t-28: 28px;
  --t-22: 22px; --t-20: 20px; --t-16: 16px; --t-14: 14px; --t-12: 12px;

  --lh-tight: 0.95;
  --lh-snug:  1.15;
  --lh-body:  1.5;
  --eyebrow-tracking: 0.16em;

  /* ---------------------------------------------------------------
     CHROME — squared by default. The brand is photocopied, not soft.
     --------------------------------------------------------------- */
  --radius-0:   0px;     /* default — street layer is ALWAYS square */
  --radius-sm:  3px;     /* workbench buttons/cards, barely there */
  --radius-md:  6px;     /* max for product; never on street surfaces */
  --radius-pill: 999px;  /* tags / badges only */

  --border-ink:   2px solid var(--5s-black);    /* default confident border */
  --border-fine:  1.5px solid var(--5s-black);
  --border-hair:  1px solid var(--5s-ink-15);

  /* Elevation. The signature is the HARD offset ("stamp"), no blur. */
  --shadow-pop:  6px 6px 0 var(--5s-black);     /* poster/sticker elevation */
  --shadow-pop-red: 6px 6px 0 var(--5s-red);    /* alarm variant */
  --shadow-sm:   0 1px 2px rgba(11,11,11,.18);  /* subtle product only */
  --shadow-md:   0 4px 10px rgba(11,11,11,.16);

  /* Motion — confident, stamped. No bounce, no spring. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 160ms;

  /* ---------------------------------------------------------------
     TEXTURE — the xerox grain + caution stripe, as reusable values.
     --------------------------------------------------------------- */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --halftone: radial-gradient(var(--5s-black) 1.3px, transparent 1.4px);
  --stripe: repeating-linear-gradient(45deg, var(--5s-black) 0 11px, var(--5s-paper) 11px 22px);
  --stripe-hazard: repeating-linear-gradient(45deg, var(--5s-black) 0 11px, var(--5s-amber) 11px 22px);
}

/* =====================================================================
   BASE TYPE — wrap a root in .s5 (or use <body class="s5">)
   ===================================================================== */
.s5 {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg-paper);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

.s5 h1, .s5 .h1 { font-family: var(--font-stencil); font-size: var(--t-64); line-height: var(--lh-tight); text-transform: uppercase; }
.s5 h2, .s5 .h2 { font-family: var(--font-heavy);   font-size: var(--t-36); line-height: var(--lh-snug); text-transform: uppercase; }
.s5 h3, .s5 .h3 { font-family: var(--font-heavy);   font-size: var(--t-22); line-height: var(--lh-snug); }
.s5 p  { font-size: var(--t-16); max-width: 68ch; }

/* Eyebrow / section label — Poppins (legible), bold, tracked, uppercase */
.s5 .eyebrow {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: var(--t-12);
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-tracking);
}

/* Field note — the SPARING typewriter flavor. Min ~13px, short strings only. */
.s5 .fieldnote {
  font-family: var(--font-type);
  font-size: var(--t-14);
  letter-spacing: 0.04em;
}

/* One accent word per surface — marker, never below ~24px */
.s5 .marker { font-family: var(--font-marker); font-weight: 400; }

/* The rallying cry helper */
.s5 .rally { font-family: var(--font-stencil); text-transform: uppercase; line-height: var(--lh-tight); }
.s5 .rally .fk { font-family: var(--font-marker); text-transform: none; color: var(--5s-red); }

/* =====================================================================
   ZINE ELEMENTS — cut-up, photocopied, taped, stapled, stamped.
   The brand's "handmade" layer. Use on STREET surfaces; keep them OFF
   the data-dense Workbench (a stamp on a poster = punk; on a form = noise).
   ===================================================================== */

/* --- CUTOUT: a pasted-down paper scrap. Square, hard offset, slight tilt. */
.z-cutout{
  display:inline-block; background:var(--5s-paper); color:var(--5s-black);
  border:2px solid var(--5s-black); box-shadow:var(--shadow-pop);
  padding:10px 14px; transform:rotate(-1.5deg);
}
.z-cutout.tilt-r{ transform:rotate(1.5deg); }

/* --- TAPE: a strip of translucent masking tape over the top of something. */
.z-tape{ position:relative; }
.z-tape::before{
  content:""; position:absolute; top:-9px; left:50%;
  width:58%; height:20px; transform:translateX(-50%) rotate(-2.5deg);
  background:rgba(242,180,0,.72);
  border-left:2px dashed rgba(0,0,0,.18); border-right:2px dashed rgba(0,0,0,.18);
  box-shadow:0 1px 2px rgba(0,0,0,.15); pointer-events:none;
}

/* --- STAPLE: a small bent-wire staple. Place top-left of a "stapled" scrap. */
.z-staple{
  display:inline-block; width:22px; height:8px;
  border:3px solid var(--5s-ink-70); border-bottom:0;
  transform:rotate(-10deg);
}

/* --- RANSOM NOTE: each word in a clashing cut-out box. Wrap words in <span>. */
.z-ransom{ line-height:1.9; }
.z-ransom span{
  display:inline-block; margin:2px 1px; padding:2px 8px;
  font-family:var(--font-heavy); text-transform:uppercase;
  background:var(--5s-paper); color:var(--5s-black);
  border:2px solid var(--5s-black); box-shadow:2px 2px 0 var(--5s-black);
}
.z-ransom span:nth-child(2n){ font-family:var(--font-type); transform:rotate(-1.5deg); }
.z-ransom span:nth-child(3n){ background:var(--5s-black); color:var(--5s-paper); }
.z-ransom span:nth-child(4n){ background:var(--5s-red); color:#fff; transform:rotate(1.5deg); }
.z-ransom span:nth-child(5n){ font-family:var(--font-stencil); background:var(--5s-amber); color:var(--5s-black); }

/* --- REDACTION: a censor bar. .z-redact hides; add .show to reveal. */
.z-redact{ background:var(--5s-black); color:transparent; padding:0 .18em; border-radius:1px; }
.z-redact.show{ color:var(--5s-paper); }
.z-redact.red{ background:var(--5s-red); }

/* --- RUBBER STAMP: an over-inked, tilted, multiply stamp. */
.z-stamp{
  display:inline-block; font-family:var(--font-stencil); text-transform:uppercase;
  letter-spacing:.04em; color:var(--5s-red);
  border:3px solid var(--5s-red); padding:5px 13px;
  transform:rotate(-7deg); mix-blend-mode:multiply; opacity:.92;
  box-shadow:inset 0 0 0 2px rgba(224,36,31,.35);
}
.z-stamp.ink{ color:var(--5s-black); border-color:var(--5s-black); box-shadow:inset 0 0 0 2px rgba(11,11,11,.3); }

/* --- TORN / DECKLE EDGE: ragged bottom edge, like a torn-off page. */
.z-torn{
  --tear:11px;
  -webkit-mask:
    linear-gradient(#000 0 0) top/100% calc(100% - var(--tear)) no-repeat,
    conic-gradient(from -45deg at bottom, #0000 25%, #000 0) bottom/var(--tear) var(--tear) repeat-x;
          mask:
    linear-gradient(#000 0 0) top/100% calc(100% - var(--tear)) no-repeat,
    conic-gradient(from -45deg at bottom, #0000 25%, #000 0) bottom/var(--tear) var(--tear) repeat-x;
}

/* --- HALFTONE BLOCK: dot-screen patch. Use as a duotone photo placeholder. */
.z-halftone{
  background-color:var(--5s-paper);
  background-image:var(--halftone); background-size:5px 5px;
}
.z-halftone.dark{ background-color:var(--5s-black); background-image:radial-gradient(var(--5s-paper) 1.3px, transparent 1.4px); }

/* --- SCRIBBLE: a hand-drawn marker ring around a word/element. */
.z-scribble{ position:relative; display:inline-block; }
.z-scribble::after{
  content:""; position:absolute; inset:-7px -13px; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 56'%3E%3Cfilter id='r'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='3'/%3E%3C/filter%3E%3Cg filter='url(%23r)'%3E%3Cellipse cx='60' cy='28' rx='54' ry='22' fill='none' stroke='%23E0241F' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat;
}