/* ==========================================================================
   PRISMA — base styles · brand book 1.2 (19.09.2026)
   Element defaults and the few brand classes, on top of prisma-tokens.css.
   Import this only in a plain-CSS surface (a static page, an email preview,
   a print sheet). A Tailwind or component-library app imports the tokens
   only and maps them into its own theme — see BRAND.md §0.
   ========================================================================== */
@import "./prisma-tokens.css";

/* --------------------------------------------------------------------------
   Hard rules, encoded so they are hard to break by accident
   -------------------------------------------------------------------------- */

/* Body copy never uses a Core colour on a light ground (1.60 to 2.98:1).
   Cores are for the gradient, the mark, rules, icons inside the mark and
   charts. The four hues are never a button, link or focus colour. */

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--p-font-sans);
  font-size: var(--p-size-body);
  line-height: var(--p-leading-body);
  font-weight: var(--p-weight-regular);
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  font-weight: var(--p-weight-bold);
  margin: 0 0 var(--p-space-4);
}
h1 { font-size: var(--p-size-h1); line-height: var(--p-leading-h1); letter-spacing: var(--p-track-h1); }
h2 { font-size: var(--p-size-h2); line-height: var(--p-leading-h2); letter-spacing: var(--p-track-h2); }
.display {
  font-size: var(--p-size-display);
  font-weight: var(--p-weight-display);
  line-height: var(--p-leading-display);
  letter-spacing: var(--p-track-display);
}
.intro { font-size: var(--p-size-intro); line-height: var(--p-leading-intro); }
small, .small { font-size: var(--p-size-small); line-height: var(--p-leading-small); }

a { color: var(--c-link); }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }

/* Uppercase labels: mono, tracked. Latin only — never track lowercase Greek. */
.label {
  font: var(--label-font);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.btn {
  display: inline-block;
  background: var(--c-action);
  color: var(--c-action-text);
  font: var(--btn-font);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: 0;
  border-radius: var(--btn-radius);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--p-motion-fast) ease;
}

/* Cards are tonal: border, no shadow. Depth belongs to the A. */
.card {
  background: var(--card-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--card-radius);
  padding: var(--card-pad);
}

/* The refraction line: 2 to 3px of spectrum. One per surface. */
.refraction {
  height: 3px;
  border: 0;
  background: var(--p-spectrum);
  border-radius: 2px;
}

/* Motion off when the user asked for less. Nothing moves layout. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}