/* GPH_VISUAL_CANON_V1 — final cross-site visual token source */
:root {
  --gph-ink: #1A1728;
  --gph-ink-soft: #262039;
  --gph-bone: #F2EDE3;
  --gph-ivory: #FAF6EE;
  --gph-bone-low: #E6DED1;
  --gph-gold: #D9BA62;
  --gph-gold-hi: #E3C978;
  --gph-purple: #735DA5;
  --gph-blue: #4F75C8;
  --gph-teal: #3EA99F;

  --gph-display: "Sora", "Aptos Display", "Segoe UI", system-ui, sans-serif;
  --gph-body: "Inter", "Aptos", "Segoe UI", system-ui, sans-serif;

  --gph-radius-sm: 10px;
  --gph-radius-md: 16px;
  --gph-radius-lg: 24px;
  --gph-radius-xl: 30px;

  --gph-shadow-light: 0 24px 64px rgba(45, 37, 65, .09);
  --gph-shadow-dark: 0 28px 76px rgba(4, 3, 12, .28);
}

.gph-canon-page {
  background: var(--gph-bone);
  color: var(--gph-ink);
  font-family: var(--gph-body);
}

.gph-canon-page h1,
.gph-canon-page h2,
.gph-canon-page h3,
.gph-canon-page h4 {
  color: var(--gph-ink);
  font-family: var(--gph-display);
}

.gph-canon-header,
.gph-canon-footer,
.gph-canon-dark {
  background: var(--gph-ink);
  color: var(--gph-ivory);
}

.gph-canon-glass-dark {
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(145deg, rgba(250,246,238,.11), rgba(250,246,238,.045));
  box-shadow: var(--gph-shadow-dark), inset 0 1px 0 rgba(255,255,255,.15);
  backdrop-filter: blur(20px) saturate(125%);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
}

.gph-canon-glass-light {
  border: 1px solid rgba(26,23,40,.10);
  background: linear-gradient(145deg, rgba(250,246,238,.82), rgba(242,237,227,.60));
  box-shadow: var(--gph-shadow-light), inset 0 1px 0 rgba(255,255,255,.70);
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
}

.gph-canon-primary {
  background: var(--gph-gold);
  color: var(--gph-ink);
}

.gph-canon-primary:hover,
.gph-canon-primary:focus-visible {
  background: var(--gph-gold-hi);
}

.gph-canon-focus:focus-visible {
  outline: 2px solid var(--gph-gold);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .gph-canon-shell { padding-inline: 18px; }
}

@media (max-width: 390px) {
  .gph-canon-shell { padding-inline: 16px; }
}