/* Yi Playground design tokens and light-DOM components (spec §3).
   Every page loads this file. The chrome's Shadow DOM reads the same custom properties. */

:root {
  --pg-ink: #111;
  --pg-paper: #fff;
  --pg-muted: #555;
  --pg-faint: #888;
  --pg-accent: #FFC700;
  --pg-chrome-bg-dark: #171b20;
  --pg-chrome-fg-dark: #e8ecef;
  --pg-chrome-line-light: #24303926;
  --pg-chrome-line-dark: #ffffff30;

  --pg-font: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pg-weight-title: 500;
  --pg-weight-body: 400;

  --pg-control: 44px;
  --pg-icon: 20px;
  --pg-gap: 8px;
  --pg-edge: 20px;
  --pg-card-radius: 12px;
  --pg-ease: cubic-bezier(.2, .7, .2, 1);
  --pg-fast: 150ms;
  --pg-slow: 350ms;

  /* Surface-dependent roles; light by default. */
  --pg-fg: var(--pg-ink);
  --pg-fg-muted: var(--pg-muted);
  --pg-fg-faint: var(--pg-faint);
  --pg-control-bg: var(--pg-paper);
  --pg-control-fg: var(--pg-ink);
  --pg-control-line: var(--pg-chrome-line-light);
  --pg-focus: var(--pg-ink);
  --pg-tomato-gap: var(--pg-paper);
  --pg-tomato-pupil: #111;

  /* The global nav (tomato mark and cluster buttons): a frosted, see-through platter that lets the
     artwork show through, with a dark mark on light pages and a light one on dark pages. */
  --pg-nav-bg: rgb(255 255 255 / .55);
  --pg-nav-fg: var(--pg-ink);
  --pg-nav-tomato-gap: #fff;
  --pg-nav-blur: blur(14px) saturate(1.4);
}

[data-surface="dark"] {
  --pg-fg: var(--pg-chrome-fg-dark);
  --pg-fg-muted: #a3acb2;
  --pg-fg-faint: #7d868c;
  --pg-control-bg: var(--pg-chrome-bg-dark);
  --pg-control-fg: var(--pg-chrome-fg-dark);
  --pg-control-line: var(--pg-chrome-line-dark);
  --pg-focus: var(--pg-chrome-fg-dark);
  --pg-tomato-gap: var(--pg-chrome-bg-dark);
  --pg-nav-bg: rgb(23 27 32 / .55);
  --pg-nav-fg: var(--pg-chrome-fg-dark);
  --pg-nav-tomato-gap: var(--pg-chrome-bg-dark);
}

/* Archived pages only borrow the tokens for the mark; their own focus styles stay. */
:where(:root:not([data-pg="archived"])) :focus-visible {
  outline: 2px solid var(--pg-focus);
  outline-offset: 3px;
}

/* Cluster buttons. Project controls keep their ids and handlers; this is their only look. */
.pg-control {
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  width: var(--pg-control);
  height: var(--pg-control);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pg-nav-bg);
  -webkit-backdrop-filter: var(--pg-nav-blur);
  backdrop-filter: var(--pg-nav-blur);
  color: var(--pg-nav-fg);
  font: var(--pg-weight-title) 15px/1 var(--pg-font);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform var(--pg-fast) var(--pg-ease), box-shadow var(--pg-fast) var(--pg-ease);
}
.pg-control[hidden] { display: none; }
.pg-control:disabled { opacity: .4; cursor: default; }
.pg-control:disabled:active { transform: none; }
.pg-control svg {
  width: var(--pg-icon);
  height: var(--pg-icon);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pg-control:active { transform: scale(.95); }
.pg-control[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px currentColor; }

/* Explanation-page parts (spec §7). Layout is each page's own. */
.pg-step-label {
  font: var(--pg-weight-title) 12px/1.2 var(--pg-font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pg-fg-faint);
}
.pg-heading {
  margin: 0;
  font: var(--pg-weight-title) clamp(28px, 4vw, 44px)/1.08 var(--pg-font);
  letter-spacing: -.025em;
  color: var(--pg-fg);
}
.pg-body {
  font: var(--pg-weight-body) 16px/1.55 var(--pg-font);
  color: var(--pg-fg-muted);
}
.pg-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--pg-control);
  padding: 0 18px;
  border: 1px solid var(--pg-control-line);
  border-radius: 999px;
  background: var(--pg-control-bg);
  color: var(--pg-control-fg);
  font: var(--pg-weight-title) 14px/1 var(--pg-font);
  text-decoration: none;
  cursor: pointer;
}
.pg-button:hover:not(:disabled) { border-color: var(--pg-fg-muted); }
.pg-button:disabled { opacity: .4; cursor: default; }
.pg-button--primary {
  border-color: transparent;
  background: var(--pg-fg);
  color: var(--pg-control-bg);
}
.pg-button--primary:hover:not(:disabled) { border-color: transparent; opacity: .86; }
.pg-demo {
  border: 1px solid var(--pg-control-line);
  border-radius: var(--pg-card-radius);
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .pg-control, .pg-button { transition: none; }
  .pg-control:active { transform: none; }
}