/* Archimedes — Opulent Deco theme tokens.
   Cabinet exterior: brass, black lacquer, ivory, emerald.
   Terminal interior: phosphor green on near-black, no scanlines. */

:root {
  /* Cabinet — exterior */
  --arch-lacquer-deep: #07060a;
  --arch-lacquer: #100d10;
  --arch-lacquer-mid: #1a1518;
  --arch-walnut: #2a1f1a;
  --arch-walnut-light: #3a2c24;

  --arch-brass-shadow: #4a341a;
  --arch-brass-dark: #6f4f23;
  --arch-brass: #b4862e;
  --arch-brass-bright: #d4a849;
  --arch-brass-highlight: #f0d484;
  --arch-brass-rim: #8a6427;

  --arch-ivory: #ede5d0;
  --arch-ivory-dim: #c8bda1;
  --arch-ivory-deep: #8a7d63;

  --arch-emerald-deep: #0a3a2c;
  --arch-emerald: #126b4e;
  --arch-emerald-bright: #1d9c6f;

  --arch-sapphire-deep: #0d2440;
  --arch-sapphire: #1e4980;

  --arch-vermilion: #b53624;        /* wax seal */
  --arch-vermilion-deep: #7a1f12;
  --arch-vermilion-bright: #d54f3a;
  --arch-amber: #e6a635;             /* caution chevrons */

  /* Phosphor — interior */
  --arch-phosphor-bg: #050805;
  --arch-phosphor-bg-warm: #060604;
  --arch-phosphor-green: #4fff9a;
  --arch-phosphor-green-mid: #2cc372;
  --arch-phosphor-green-dim: #186e3e;
  --arch-phosphor-amber: #ffb33c;
  --arch-phosphor-amber-dim: #8a5e1b;
  --arch-phosphor-bone: #f0ead0;

  /* Type stacks */
  --arch-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --arch-body: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --arch-mono: "VT323", "IBM 3270", "IBM Plex Mono", ui-monospace, monospace;

  /* Spacing rhythm */
  --arch-rim: 6px;
  --arch-bezel: 14px;
}

/* Brass plate — used for nameplates, dashboard panels, button caps */
.arch-plate {
  background:
    linear-gradient(180deg,
      var(--arch-brass-highlight) 0%,
      var(--arch-brass-bright) 18%,
      var(--arch-brass) 50%,
      var(--arch-brass-dark) 88%,
      var(--arch-brass-shadow) 100%);
  border: 1px solid var(--arch-brass-shadow);
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 170, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.6);
  color: var(--arch-lacquer);
}

.arch-plate-dark {
  background:
    linear-gradient(180deg,
      var(--arch-brass-bright) 0%,
      var(--arch-brass) 16%,
      var(--arch-brass-dark) 55%,
      var(--arch-brass-shadow) 100%);
  border: 1px solid var(--arch-lacquer-deep);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 160, 0.35),
    inset 0 -2px 4px rgba(0, 0, 0, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.8);
  color: var(--arch-lacquer);
}

/* Lacquer cabinet body */
.arch-lacquer {
  background:
    radial-gradient(ellipse at top, rgba(60, 40, 30, 0.55), transparent 60%),
    radial-gradient(ellipse at 30% 70%, rgba(50, 35, 25, 0.35), transparent 70%),
    linear-gradient(180deg, var(--arch-lacquer) 0%, var(--arch-lacquer-deep) 100%);
}

/* Engraved text — brass background with deep recessed feel */
.arch-engraved {
  font-family: var(--arch-display);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--arch-lacquer);
  text-shadow:
    0 1px 0 rgba(255, 230, 170, 0.5),
    0 -1px 0 rgba(0, 0, 0, 0.35);
}

/* Etched-glass — translucent ivory plate */
.arch-etched {
  background: linear-gradient(180deg,
    rgba(237, 229, 208, 0.14) 0%,
    rgba(237, 229, 208, 0.06) 100%);
  border: 1px solid rgba(237, 229, 208, 0.25);
  backdrop-filter: blur(8px);
}

/* Phosphor — interior surface */
.arch-phosphor {
  background: var(--arch-phosphor-bg);
  color: var(--arch-phosphor-green);
  font-family: var(--arch-mono);
  text-shadow: 0 0 6px rgba(79, 255, 154, 0.45);
}

.arch-phosphor-amber {
  background: var(--arch-phosphor-bg-warm);
  color: var(--arch-phosphor-amber);
  font-family: var(--arch-mono);
  text-shadow: 0 0 6px rgba(255, 179, 60, 0.5);
}

/* Ivory pinstripe — emerald background with thin gold lines */
.arch-pinstripe {
  background:
    repeating-linear-gradient(45deg,
      rgba(180, 134, 46, 0.06) 0px,
      rgba(180, 134, 46, 0.06) 1px,
      transparent 1px,
      transparent 16px),
    linear-gradient(180deg, var(--arch-emerald-deep), #051f17);
}

/* Annotation post-it style overrides on canvas */
.arch-note {
  font-family: var(--arch-body);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--arch-lacquer);
}