/* EXPERIMENT: Mac OS 8–9 "Platinum" (1997–2001): light grey bevelled buttons you want to press.
   Swap the experiment line in index.html between platinum.css, system6.css and retro.css (Aqua), or delete it to undo. */

/* Mac OS 8 kept the one-bit arrow: black, white rim, hard pixel edges */
html, body, a, button, .row-toggle, .pin, .chip, label {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M1 1v13l3-3 2 4h2l-2-4h4z' fill='%23000' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E") 1 1, auto;
}

:root {
  /* Platinum's greys, mixed from the page's own cream and ink so they stay warm,
     and its lavender highlight swapped for a pale tint of the accent */
  --plat: color-mix(in srgb, var(--bg) 82%, var(--ink));         /* button face */
  --plat-top: color-mix(in srgb, var(--bg) 92%, var(--ink));     /* face, top of the gradient */
  --plat-hi: color-mix(in srgb, var(--bg) 40%, #fff);            /* top-left bevel light */
  --plat-lo: color-mix(in srgb, var(--bg) 55%, var(--ink));      /* bottom-right bevel shade */
  --plat-ring: color-mix(in srgb, var(--bg) 70%, var(--ink));    /* default-button ring line */
  --plat-press: color-mix(in srgb, var(--bg) 62%, var(--ink));   /* pressed face */
  --plat-edge: color-mix(in srgb, var(--ink) 85%, var(--bg));    /* outer outline */
  --plat-select: color-mix(in srgb, var(--accent) 22%, var(--bg)); /* selection */
}

/* bevelled push button: grey face, dark outline, light top-left edge, shaded bottom-right edge */
.cta-main,
.carousel-nav button {
  background: linear-gradient(to bottom, var(--plat-top), var(--plat));
  color: var(--ink);
  border: 1px solid var(--plat-edge);
  border-radius: 4px;
  text-shadow: none;
  transition: none;
  box-shadow: inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-lo);
}
/* the default button: a thick bevelled grey ring around it */
.cta-main {
  margin: 4px;
  box-shadow:
    inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-lo),
    0 0 0 1px var(--plat-ring),
    0 0 0 3px var(--plat),
    0 0 0 4px var(--plat-edge);
}
/* pressed: the face darkens and the bevel flips, so it sinks in.
   "say hi" sinks as soon as you hover, so it feels half-clicked; the click then opens the mail. */
.cta-main:hover,
.cta-main:active,
.carousel-nav button:active:not(:disabled) {
  background: var(--plat-press); color: var(--ink);
  box-shadow: inset 1px 1px 0 var(--plat-lo), inset -1px -1px 0 var(--plat-top);
}
.cta-main:hover,
.cta-main:active {
  padding: 5px 12px 3px; /* the label drops a pixel; the ring stays put */
  box-shadow:
    inset 1px 1px 0 var(--plat-lo), inset -1px -1px 0 var(--plat-top),
    0 0 0 1px var(--plat-ring), 0 0 0 3px var(--plat), 0 0 0 4px var(--plat-edge);
}

.cta-main:active { background: var(--plat-lo); }

/* small square bevel buttons for the carousel */
.carousel-nav button { border-radius: 3px; }
.carousel-nav button:hover:not(:disabled) { border-color: var(--plat-edge); }
.carousel-nav button:disabled {
  opacity: 1; color: var(--faint); border-color: var(--plat-ring);
  background: var(--plat-top); box-shadow: none;
}

/* current section: Platinum-style selection, tinted with the accent */
.nav-link { border-radius: 2px; transition: none; }
.nav-link.active { background: var(--plat-select); color: var(--ink); box-shadow: none; }
.nav-link:not(.active):hover { color: var(--ink); background: var(--plat-top); }