/* LAN Party '98 — design tokens.
   Single source of truth for every colour, font, size and bevel used on the site,
   in canvas textures and in generated assets. Mirror: design/tokens.json.
   Rules for using them: STYLEGUIDE.md. Live reference: /styleguide.html */

@font-face {
  font-family: "VT323";
  src: url("../fonts/vt323-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Shell: the Win98 chrome every UI surface is built from ---- */
  --w98-face: #c0c0c0;      /* window / button / panel face */
  --w98-light: #ffffff;     /* outer highlight */
  --w98-hilite: #dfdfdf;    /* inner highlight */
  --w98-shadow: #808080;    /* inner shadow */
  --w98-dark: #0a0a0a;      /* outer shadow */
  --w98-title: #000080;     /* active title bar, start */
  --w98-title2: #1084d0;    /* active title bar, end */
  --w98-desktop: #008080;   /* desktop teal */
  --w98-key: #e8e8e8;       /* keycap face */
  --w98-text: #000000;
  --w98-title-off: #5a5a5a; /* inactive title bar */
  --w98-danger: #a00000;    /* error and over-budget text on grey (AA; always with words, never colour alone) */

  /* ---- Phosphor: anything shown "on a CRT" ---- */
  --crt-black: #000000;
  --phosphor: #9dff7a;      /* primary CRT text, prompts, status */
  --phosphor-link: #4dff5a; /* links on CRT surfaces */
  --dos-grey: #aaaaaa;      /* default DOS text */
  --amber: #ffcc00;         /* CRT highlights, network titles */
  --toast: #ffe066;         /* in-world announcements */
  --bsod: #0000aa;          /* the Win98 fatal exception screen */

  /* ---- Basement: the room the UI floats over ---- */
  --basement: #0b0906;      /* page background, deepest shadow */
  --wood: #4a2c17;          /* wall panelling */
  --wood-dark: #24150b;     /* panel grooves */
  --carpet: #3b2f2a;
  --ceiling: #d9d4c7;
  --beige: #d6cdb4;         /* PC plastic */
  --beige-light: #ebe4cf;   /* keycaps, bezels */
  --paper: #e8e1cc;         /* text on dark basement surfaces */
  --duct-silver: #9aa0a6;   /* the ceiling duct */
  --duct-tape: #5c6166;     /* gaffer tape, mostly holding people to things */
  --cardboard: #b8935a;     /* pizza boxes */
  --pizza-crust: #d9a04a;
  --pizza-cheese: #f2c14e;
  --pepperoni: #b22a1e;
  --foil: #c9ced4;          /* aluminium foil round the garlic bread */
  --couch: #5b7050;        /* the basement couch: faded sage plaid */
  --couch-dark: #3f4f38;    /* its base, seams and the cloth under the cushions */
  --couch-line: #a3483b;    /* rust stripe in the plaid, the throw pillow */
  --oak: #8a5a2e;           /* coffee table top */
  --beanbag: #2f5d6e;       /* the bean bag: faded teal vinyl, light panels */
  --beanbag-dark: #204452;  /* its alternate panels, handle and base */
  --tv-case: #2b2b2f;       /* the big CRT TV */
  --console-body: #9a9da1;  /* the games console and its pads */
  --console-dark: #44474b;  /* console ports, d-pads, cables, cartridge */

  /* ---- Media: floppies, CDs and the boxes they live in ---- */
  --floppy-black: #1c1c1f;  /* most disks are black */
  --floppy-blue: #2b6fd6;   /* the coloured packs */
  --floppy-red: #c0392b;
  --floppy-yellow: #e8c21b;
  --floppy-green: #3aa35a;
  --floppy-grey: #8a8d92;
  --cart-shell: #8c8f94;    /* game cartridges: grey plastic (label art reuses the poster and brand tokens) */
  --disk-metal: #b9bdc2;    /* shutters on 3.5" disks, spindle posts */
  --disk-case: #26262b;     /* black plastic library cases, tubs, jewel case trays */
  --disk-smoke: #3a3d42;    /* smoked lids */
  --case-clear: #dfe6ea;    /* jewel case lids */
  --disc-silver: #cfd3d8;   /* CD data side */
  --disc-edge: #8f949a;
  --disc-cdr: #7f9f8a;      /* CD-R data side */

  /* ---- Parody brands (never use real brand names or marks) ---- */
  --volt: #e2231a;          /* Volt Cola, UI red, caffeine meter */
  --volt-can: #c4161c;      /* Volt Cola can */
  --volt-yellow: #ffd400;   /* Volt Cola wordmark */
  --nacho: #f28a1c;         /* Nachoz, snack meter */
  --nacho-navy: #1d1a5c;    /* Nachoz bag */
  --cheese: #ffcc00;        /* Nachoz wordmark */
  --curlz-bag: #1f7a4d;     /* Cheez Curlz bag */
  --curlz: #ffa51f;         /* Cheez Curlz, the curls themselves */
  --zap-green: #4aa52a;     /* Citrus Zap label and what's in the bottle */
  --zap-lime: #b5d334;      /* Citrus Zap splash and highlights (wordmark is --volt-yellow) */
  --zap-dark: #1c5a1e;      /* Citrus Zap label bands and bottle caps */
  --cup-red: #d42b22;       /* disposable party cups */

  /* ---- Power: sockets, boards, leads and the light switch (3D only) ---- */
  --power-cord: #151515;    /* black mains leads */
  --power-plug: #f2f0e6;    /* plugs, switch plate, rocker */
  --power-brass: #b8a060;   /* plug pins */
  --power-lead: #e8c21b;    /* the yellow extension lead */
  --power-board: #e9e4d2;   /* power board casing */
  --power-neon: #ff6a1a;    /* a power board's neon switch, lit */
  --power-switch-glow: #ffb040; /* the light switch's glow dot, found in the dark */
  --power-tube-off: #3d4146;    /* a ceiling tube, off */

  /* ---- Build: the PC you carry to your table (3D only; the VGA lead is --floppy-blue, the mouse lead --floppy-green, the audio lead --zap-lime) ---- */
  --cable-ps2: #7a3f98;     /* the keyboard lead's purple plug and its socket on the back of the tower */
  --mat-cloth: #1c3b6e;     /* a cloth mouse mat; the large one is --poster-ember and the hard plastic one --disk-case */

  /* ---- Apps: the little programs on the desktop ---- */
  /* Minesweeper numbers: the classic hues, darkened where needed to pass AA on the grey; 4 and 7 reuse shell colours */
  --mine-1: #0000ff;
  --mine-2: #005000;
  --mine-3: #a00000;
  --mine-5: #800000;
  --mine-6: #005050;
  --mine-8: #505050;
  --mine-face: #ffff00;     /* the smiley button */
  /* Solitaire on the in-room PCs: the felt and the red suits (black suits use --w98-text) */
  --felt: #008000;
  --card-red: #c4161c;
  /* Downhill: the snow and the tracks in it (trees, rocks and the skier reuse basement, brand and shell tokens) */
  --snow: #f4f8ff;
  --snow-shade: #c3d0e4;

  /* ---- Phone: the candy-bar mobile on the desk at PC-02 (a parody; keys reuse --disk-metal, labels --w98-text) ---- */
  --phone-body: #2d3a44;      /* slate shell */
  --phone-body-light: #4a5a66; /* its bevel highlight and the seam round the screen */
  --lcd: #a3b88f;             /* the green-grey screen, lit (AA with --lcd-ink) */
  --lcd-ink: #1b2616;         /* pixels, text and the snake */

  /* ---- Web: the pages inside Internet Explorer (they sit on --beige-light; links are --w98-title) ---- */
  --web-visited: #551a8b;   /* visited links: the classic purple, AA on --beige-light */
  --web-width: 520px;       /* the page column; the site is built for 800x600 */

  /* ---- Posters: invented 1990s game boxes and movie one-sheets on the walls (all titles, characters and art are made up) ---- */
  --poster-ember: #7a1a12;        /* dark crimson: fortress corridors, burnt skies */
  --poster-steel: #46697a;        /* armour plate, teal steel */
  --poster-steel-light: #8fb1c0;  /* armour highlights */
  --poster-space: #0b1033;        /* deep space */
  --poster-nebula: #5b2f86;       /* gas clouds */
  --poster-planet: #b4532a;       /* rust planet */
  --poster-rock: #6e6055;         /* asteroid rock */
  --poster-rock-dark: #3d352f;    /* craters, rock shadow */
  --poster-chrome: #c9d5dd;       /* machine faces, hulls */
  --poster-chrome-dark: #5e6c76;  /* chrome shade, gun metal */
  --poster-sky: #7fb4dc;          /* cartoon sky */

  /* ---- People: the other players in the room ---- */
  --link-led: #1fbf3a;      /* "plugged into the hub" status LED */
  --skin: #e0b48f;
  --skin-2: #c68a5e;        /* surfer tan */
  --skin-3: #8d5a3b;
  --skin-4: #f0d9c8;        /* goth pale */
  --skin-5: #5a3825;
  --denim: #2c3e66;
  --shoe: #1a1a1a;
  --hair: #3b2716;
  --hair-black: #121212;
  --hair-blond: #e3c45a;
  --hair-red: #a8431f;
  /* faces: eyes, lips (blended into each person's skin) */
  --eye-white: #f4efe6;     /* eyeballs and teeth */
  --iris-brown: #4a2e1a;
  --iris-blue: #3c6ea8;
  --iris-green: #4e7a52;
  --lip: #a8493f;
  /* clothes and rave gear for the 90s crowd */
  --clothes-black: #141414;   /* trench coats, band tees */
  --clothes-khaki: #b5a47a;
  --clothes-denim-light: #5b7db5;
  --clothes-white: #ececec;   /* sneakers, singlets */
  --neon-green: #39ff14;
  --neon-pink: #ff2d95;
  --neon-blue: #19d3ff;
  /* shirt colours, handed out in this order as people walk in */
  --shirt-1: #e2231a;
  --shirt-2: #2b6fd6;
  --shirt-3: #e8c21b;
  --shirt-4: #3aa35a;
  --shirt-5: #9b4dca;
  --shirt-6: #f28a1c;
  --shirt-7: #20b2aa;
  --shirt-8: #d94f8a;

  /* ---- Type ---- */
  --font-crt: "VT323", "Lucida Console", "Courier New", monospace; /* display, CRT, numbers */
  --font-ui: "Tahoma", "MS Sans Serif", "Segoe UI", system-ui, sans-serif; /* shell UI, body copy */
  --text-ui-xs: 11px;  /* meter labels */
  --text-ui-sm: 12px;  /* keycaps, bars */
  --text-ui: 13px;     /* default body */
  --text-crt-sm: 18px;
  --text-crt: 20px;
  --text-crt-md: 24px;
  --text-crt-lg: 26px;
  --text-crt-xl: 40px; /* window headline */
  --text-crt-hero: 96px; /* social images, splash only */
  --leading-ui: 1.4;

  /* ---- Space (4px grid; 2 and 6 only for bevel-adjacent nudges) ---- */
  --space-0: 2px;
  --space-1: 4px;
  --space-1h: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --gutter: 16px;     /* minimum screen edge gutter */

  /* ---- Bevels: the only way depth is shown in UI. No blur shadows, no radius. ---- */
  --bevel-raised: inset -1px -1px var(--w98-dark), inset 1px 1px var(--w98-light),
                  inset -2px -2px var(--w98-shadow), inset 2px 2px var(--w98-hilite);
  --bevel-pressed: inset 1px 1px var(--w98-dark), inset -1px -1px var(--w98-light),
                   inset 2px 2px var(--w98-shadow);
  --bevel-sunken: inset 1px 1px var(--w98-shadow), inset -1px -1px var(--w98-light);
  --bevel-small: inset -1px -1px var(--w98-dark), inset 1px 1px var(--w98-light);
  --bevel-key: inset -1px -1px var(--w98-shadow), inset 1px 1px var(--w98-light);
  --bevel-cell: inset 1px 1px var(--w98-shadow); /* an opened Minesweeper square */
  --bevel-phone: inset 2px 2px var(--phone-body-light), inset -2px -2px var(--crt-black); /* the phone's shell */
  --title-gradient: linear-gradient(90deg, var(--w98-title), var(--w98-title2));
  --text-shadow-hard: 2px 2px 0 #000;

  /* ---- Overlays ---- */
  --scrim: rgba(5, 4, 2, .55);
  --hud-bg: rgba(0, 0, 0, .7);
  --drop: rgba(0, 0, 0, .45);          /* hard offset shadow under windows in the explainer video */
  --drop-shadow: 8px 8px 0 var(--drop);
  --bar-bg: rgba(10, 8, 6, .82);
  --scanlines: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
  --vignette: radial-gradient(ellipse at center, transparent 62%, rgba(0,0,0,.45) 100%);

  /* ---- Desktop ---- */
  --taskbar-h: 28px;
  --startmenu-banner-w: 24px;
  --grip: 4px;         /* window resize border, as thick as the frame */
  --grip-corner: 12px; /* the corner zones of that border */

  /* ---- Layers ---- */
  --z-scene: 0;
  --z-hud: 10;
  --z-monitor: 20;
  --z-seated: 21;
  --z-window: 22;
  --z-taskbar: 24;
  --z-startmenu: 25;
  --z-dialog: 30;

  /* ---- Motion ---- */
  --dur-fast: .4s;
  --dur-slow: 1.2s;

  color-scheme: dark;
}