/* Garage landing page: shared tokens and fonts, sampled from Altology's Structure board.
   Link with <link rel="stylesheet" href="../../shared/garage.css"> from v/<id>/index.html. */

@font-face { font-family: 'Inter'; src: url('fonts/Inter-400.woff2') format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-500.woff2') format('woff2'); font-weight: 500; font-display: block; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-600.woff2') format('woff2'); font-weight: 600; font-display: block; }
@font-face { font-family: 'Geist Mono'; src: url('fonts/GeistMono-normal-400.woff2') format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Geist Mono'; src: url('fonts/GeistMono-normal-500.woff2') format('woff2'); font-weight: 500; font-display: block; }
@font-face { font-family: 'VT323'; src: url('fonts/VT323.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'Silkscreen'; src: url('fonts/Silkscreen-Regular.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'Pixelify Sans'; src: url('fonts/PixelifySans.ttf') format('truetype'); font-display: block; }

:root {
  /* the three desktops (median of a clean patch on the board) */
  --garden: #5a865a;   /* desktop 1, green, hero */
  --desk:   #8d684f;   /* desktop 2, brown, how it works */
  --garage: #7987a9;   /* desktop 3, blue, build / pricing / contact */

  --board: #444444;    /* the board's dark surround */
  --frame: #282828;
  --ink:   #f6f4ee;    /* headline and label white */
  --ink-dim: rgba(246, 244, 238, .62);
  --pill:  #eef0ea;    /* Get started button */
  --pill-ink: #1f2420;

  /* window chrome, from the board's examples */
  --win-paper: #f3f1ea;
  --win-line:  #2a2a2a;
  --why-lavender: #dfe3fb;   /* WHY GARAGE window body */
  --notes-cream: #f6f0d8;    /* WHAT_IF notes title bar */
  --agent-blue: #1f4dff;     /* the pixel blob */
  --lime-folder: #d8f06a;    /* AI TEAM folder */
  --folder-green: #a8f0a0;   /* WHAT OTHERS SAY folder */
  --w95-grey: #c0c0c0;
  --w95-blue: #0000a8;

  --sans: 'Inter', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --pixel: 'Silkscreen', 'VT323', monospace;

  /* fine grain: an SVG noise tile, multiply it over the desktop colour */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Helper classes, optional. */
.g-grain { background-image: var(--grain); background-size: 160px 160px; mix-blend-mode: multiply; opacity: .35; }
.g-label { font: 500 13px/1.25 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
           text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.g-watermark { font: 500 15px/1 var(--sans); letter-spacing: .08em; color: transparent;
               -webkit-text-stroke: .6px rgba(0,0,0,.18); text-shadow: 0 1px 0 rgba(255,255,255,.10); }
.g-headline { font: 500 clamp(34px, 4.2vw, 64px)/1.06 var(--sans); letter-spacing: -.025em; color: var(--ink);
              text-align: center; }
.g-sub { font: 400 15px/1.45 var(--sans); color: var(--ink); opacity: .92; text-align: center; }
.g-pill { font: 500 15px/1 var(--sans); background: var(--pill); color: var(--pill-ink); border-radius: 10px;
          padding: 13px 20px; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 18px rgba(0,0,0,.18); border: 0; }
.g-pixelated { image-rendering: pixelated; }