@import './styles/reset.css';
@import './styles/layouts.css';
@import './styles/components.css';
@import './styles/decorations.css';

:root {
  --font-body: monospace;
  --font-heading: serif;
  --gap: 1rem;
  --padding: 1rem;

  --color-background: #e6e0c8;
  --color-surface: #f7f2dd;
  --color-input: #fefcf5;
  --color-border: #97917e;
  --color-text: #1a1710;

  /* Red — screen-printed brick */
  --color-red-1: #f5d6d0;
  --color-red-2: #e8a090;
  --color-red-3: #c03a2a;
  --color-red-4: #7a1e14;

  /* Orange — risograph rust */
  --color-orange-1: #f5dfc8;
  --color-orange-2: #e8b080;
  --color-orange-3: #c45a18;
  --color-orange-4: #7a3008;

  /* Amber — inky beeswax */
  --color-amber-1: #f5e8b8;
  --color-amber-2: #e0c060;
  --color-amber-3: #b07e10;
  --color-amber-4: #6a4a05;

  /* Yellow — warm old gold */
  --color-yellow-1: #f5edb0;
  --color-yellow-2: #dcc858;
  --color-yellow-3: #a87e18;
  --color-yellow-4: #664c08;

  /* Lime — bold olive press */
  --color-lime-1: #e8edaa;
  --color-lime-2: #c0cc58;
  --color-lime-3: #788a10;
  --color-lime-4: #425208;

  /* Green — inky sage */
  --color-green-1: #cce8c0;
  --color-green-2: #88c070;
  --color-green-3: #357828;
  --color-green-4: #184810;

  /* Emerald — rich verdigris */
  --color-emerald-1: #bce8d8;
  --color-emerald-2: #60c0a0;
  --color-emerald-3: #187858;
  --color-emerald-4: #084830;

  /* Teal — bold aged copper */
  --color-teal-1: #b8e4e0;
  --color-teal-2: #58c0b8;
  --color-teal-3: #107870;
  --color-teal-4: #054840;

  /* Cyan — strong ink wash */
  --color-cyan-1: #b8dce8;
  --color-cyan-2: #50b0c8;
  --color-cyan-3: #0e7090;
  --color-cyan-4: #054458;

  /* Sky — punchy dusty horizon */
  --color-sky-1: #bcd4ec;
  --color-sky-2: #60a8d8;
  --color-sky-3: #1868a8;
  --color-sky-4: #083e68;

  /* Blue — bold ultramarine */
  --color-blue-1: #bccce8;
  --color-blue-2: #60a0d8; 
  --color-blue-3: #1855a8;
  --color-blue-4: #083068;

  /* Indigo — rich old ink */
  --color-indigo-1: #c8cce8;
  --color-indigo-2: #8090d0;
  --color-indigo-3: #2c3ea8;
  --color-indigo-4: #141e68;

  /* Violet — bold woad */
  --color-violet-1: #d8c8ec;
  --color-violet-2: #a878d8;
  --color-violet-3: #5828a8;
  --color-violet-4: #2e1268;

  /* Purple — punchy lavender */
  --color-purple-1: #e4c8ec;
  --color-purple-2: #c078d8;
  --color-purple-3: #7028a8;
  --color-purple-4: #3e1268;

  /* Fuchsia — rich magenta ink */
  --color-fuchsia-1: #ecc8e4;
  --color-fuchsia-2: #d870c8;
  --color-fuchsia-3: #a02898;
  --color-fuchsia-4: #601058;

  /* Pink — bold rose petal */
  --color-pink-1: #ecc8d8;
  --color-pink-2: #d870a0;
  --color-pink-3: #a02860;
  --color-pink-4: #601038;

  /* Rose — warm dusky blush */
  --color-rose-1: #ecc8c8;
  --color-rose-2: #d87070;
  --color-rose-3: #a02828;
  --color-rose-4: #601010;
}

body {
  font-family: var(--font-body);
  background: var(--color-background);
  color: var(--color-foreground);
  padding: var(--padding);
  height: 100dvh;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}