/* =============================================================
   DirtySouthDistrict — Design System
   Visual era: 1996–1999 / Win95-98 desktop chrome × Romanian
   dirty-south rap collective (SJS / Suicidjegos)
   ============================================================= */

/* ---------- Webfonts (Google Fonts substitutions, see README) ---------- */
@import url('https://fonts.googleapis.com/css2?family=VT323&family=Special+Elite&family=IBM+Plex+Mono:wght@400;500;600;700&family=Cutive+Mono&family=Bungee&family=Playfair+Display:ital,wght@1,700;1,800;1,900&family=EB+Garamond:ital,wght@1,500;1,700&display=swap');

:root {
  /* =========================================================
     COLOR — OS chrome (Windows 95/98 / CHIP-magazine palette)
     The literal Win98 system colors. Used for window chrome,
     buttons, panels, tables.
     ========================================================= */
  --os-silver:        #C3C3C3;   /* main 3D face / "ButtonFace" */
  --os-silver-light:  #DFDFDF;   /* light filler, soft inset */
  --os-white:         #FFFFFF;   /* top/left bevel highlight */
  --os-shadow:        #818181;   /* mid bevel shadow */
  --os-black:         #000000;   /* hard outer bevel + text */
  --os-titlebar:      #000080;   /* "ActiveTitle" navy */
  --os-titlebar-2:    #1084D0;   /* gradient stop on Win98 */
  --os-titlebar-fg:   #FFFFFF;
  --os-titlebar-inactive: #808080;
  --os-desktop:       #008080;   /* default Win98 teal desktop */
  --os-disabled:      #808080;
  --os-link:          #0000EE;   /* default browser link */
  --os-visited:       #551A8B;
  --os-selection-bg:  #000080;
  --os-selection-fg:  #FFFFFF;

  /* =========================================================
     COLOR — DSD brand (gritty, south, "jegos" = filthy)
     Earth tones, hazard accents, photocopy contrast.
     ========================================================= */
  --dsd-ink:          #0A0A0A;   /* near-black, photocopy ink */
  --dsd-paper:        #E8E2D0;   /* aged off-white / newsprint */
  --dsd-paper-2:      #D6CDB4;   /* deeper kraft */
  --dsd-mud:          #5B4A3A;   /* swamp / dirt */
  --dsd-clay:         #8C5A2C;   /* clay / brick */
  --dsd-blood:        #B33A2E;   /* bloodshot red */
  --dsd-hazard:       #DCC02E;   /* tape / caution yellow */
  --dsd-toxic:        #6E8C2C;   /* swamp green */
  --dsd-bruise:       #2E2A4A;   /* deep bruise navy */
  --dsd-cd-magenta:   #C72A8E;   /* CD-ROM jewel-case magenta */
  --dsd-cd-cyan:      #2EB8C6;   /* CD-ROM cyan */

  /* =========================================================
     COLOR — Semantic (form states, links, alerts)
     ========================================================= */
  --sem-error:        #C8001A;
  --sem-warning:      #DCC02E;
  --sem-success:      #2E7D32;
  --sem-info:         #000080;
  --sem-link:         var(--os-link);
  --sem-link-visited: var(--os-visited);

  /* =========================================================
     COLOR — Foreground / Background tokens
     ========================================================= */
  --fg-1:             #000000;   /* primary on chrome */
  --fg-2:             #404040;   /* secondary text */
  --fg-3:             #606060;   /* tertiary / captions */
  --fg-on-dark:       #E8E2D0;
  --fg-disabled:      #808080;

  --bg-app:           #008080;   /* the desktop teal */
  --bg-window:        #C3C3C3;
  --bg-panel:         #C3C3C3;
  --bg-field:         #FFFFFF;
  --bg-paper:         var(--dsd-paper);
  --bg-ink:           var(--dsd-ink);

  /* =========================================================
     TYPE — Stacks
     System chrome uses real Win98-era families; we layer in
     Google Font fallbacks for offline + cross-OS rendering.
     ========================================================= */
  --font-system: "Pixelated MS Sans Serif", "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Geneva, Verdana, sans-serif;
  --font-ui:     "Tahoma", "Geneva", "MS Sans Serif", sans-serif;
  --font-serif:  "Times New Roman", "Times", "Liberation Serif", serif;
  --font-mono:   "IBM Plex Mono", "Courier New", "Courier", monospace;
  --font-crt:    "VT323", "Courier New", monospace;             /* CRT terminal / DOS */
  --font-zine:   "Special Elite", "Cutive Mono", "Courier New", monospace; /* typewriter zine */
  --font-poster: "Bungee", "Impact", "Haettenschweiler", "Arial Black", sans-serif;
  --font-display:"Playfair Display", "EB Garamond", "Times New Roman", "Times", serif; /* 90s magazine masthead — "Welcome to Apple" 1997 italic serif */
  --font-masthead:"Playfair Display", "EB Garamond", "Times New Roman", serif;

  /* =========================================================
     TYPE — Sizes (kept honest to 1996 scale: 11–14px UI)
     ========================================================= */
  --fs-xxs:  10px;
  --fs-xs:   11px;
  --fs-sm:   12px;   /* default OS chrome */
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   20px;
  --fs-2xl:  28px;
  --fs-3xl:  40px;
  --fs-4xl:  56px;
  --fs-5xl:  80px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.45;
  --lh-loose: 1.6;

  /* =========================================================
     SPACING — 4px base, but density is HIGH (Win98)
     ========================================================= */
  --sp-0:  0px;
  --sp-1:  2px;
  --sp-2:  4px;
  --sp-3:  6px;
  --sp-4:  8px;
  --sp-5:  12px;
  --sp-6:  16px;
  --sp-7:  20px;
  --sp-8:  24px;
  --sp-9:  32px;
  --sp-10: 48px;

  /* =========================================================
     BORDERS — ALL hard. No soft radii. Max radius = 0px.
     The 90s desktop look depends on stair-stepped bevels.
     ========================================================= */
  --radius-0: 0px;
  --radius-1: 2px;     /* used VERY sparingly, e.g. tape edges */

  --bw-hairline: 1px;
  --bw-bevel:    1px;
  --bw-thick:    2px;

  /* =========================================================
     SHADOWS — there are no soft drop shadows in this system.
     Elevation is communicated via 3D bevels (4 stacked 1px
     borders). These tokens encode the bevel recipes.
     ========================================================= */
  /* Outset ("raised") — buttons, window frames, panels */
  --bevel-out:
    inset  1px  1px 0 0 var(--os-white),
    inset -1px -1px 0 0 var(--os-black),
    inset  2px  2px 0 0 var(--os-silver),
    inset -2px -2px 0 0 var(--os-shadow);

  /* Inset ("sunken") — text fields, list boxes, status bar */
  --bevel-in:
    inset  1px  1px 0 0 var(--os-shadow),
    inset -1px -1px 0 0 var(--os-white),
    inset  2px  2px 0 0 var(--os-black),
    inset -2px -2px 0 0 var(--os-silver);

  /* Pressed button (outset inverted) */
  --bevel-pressed:
    inset  1px  1px 0 0 var(--os-black),
    inset -1px -1px 0 0 var(--os-white),
    inset  2px  2px 0 0 var(--os-shadow),
    inset -2px -2px 0 0 var(--os-silver);

  /* Thin single-line bevel (group boxes) */
  --bevel-thin-out:
    inset  1px  1px 0 0 var(--os-white),
    inset -1px -1px 0 0 var(--os-shadow);
  --bevel-thin-in:
    inset  1px  1px 0 0 var(--os-shadow),
    inset -1px -1px 0 0 var(--os-white);

  /* Optional hard photocopy "drop shadow" — 4px solid black */
  --shadow-stamp: 4px 4px 0 0 var(--os-black);
  --shadow-stamp-blood: 4px 4px 0 0 var(--dsd-blood);

  /* =========================================================
     PATTERNS — stipple/checker desktop background
     ========================================================= */
  --pattern-stipple:
    repeating-conic-gradient(var(--os-silver) 0% 25%, var(--os-shadow) 0% 50%) 50% / 2px 2px;
  --pattern-checker:
    repeating-conic-gradient(#000 0% 25%, #fff 0% 50%) 50% / 8px 8px;
  --pattern-tape:
    repeating-linear-gradient(135deg, var(--dsd-hazard) 0 12px, var(--dsd-ink) 12px 24px);

  /* =========================================================
     MOTION — minimal. No bounce. Mostly instant.
     ========================================================= */
  --motion-instant: 0ms;
  --motion-snap:    80ms;     /* button press */
  --motion-blink:   1100ms;   /* cursor / marquee */
  --ease-step:      steps(1, end);
  --ease-linear:    linear;
}

/* =============================================================
   SEMANTIC TYPE STYLES
   Magazine/desktop hybrid: serif display, system-sans UI.
   ============================================================= */

.h-display {
  font-family: var(--font-poster);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--fg-1);
}

.h1 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  font-weight: 700;
  font-style: italic;       /* 90s magazine masthead */
  color: var(--fg-1);
}

.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  font-weight: 700;
  color: var(--fg-1);
}

.h3 {
  font-family: var(--font-system);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  font-weight: 700;
  color: var(--fg-1);
}

.eyebrow {
  font-family: var(--font-system);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fg-2);
}

.titlebar-text {
  font-family: var(--font-system);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--os-titlebar-fg);
}

.body, p {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--fg-1);
}

.body-lg {
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}

.caption {
  font-family: var(--font-system);
  font-size: var(--fs-xs);
  color: var(--fg-3);
}

.code, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  background: var(--bg-field);
  box-shadow: var(--bevel-thin-in);
  padding: 2px 4px;
}

.crt {
  font-family: var(--font-crt);
  font-size: var(--fs-xl);
  color: #33FF33;
  background: #000;
}

.zine {
  font-family: var(--font-zine);
  font-size: var(--fs-md);
  letter-spacing: 0.02em;
}

a, .link {
  color: var(--sem-link);
  text-decoration: underline;
  cursor: pointer;
}
a:visited { color: var(--sem-link-visited); }
a:active  { color: var(--sem-error); }

::selection { background: var(--os-selection-bg); color: var(--os-selection-fg); }