/* renieravin.com - design tokens
 *
 * PROVENANCE. These are the palette values argued in PITCH-PLAN.md, anchored on pixels sampled
 * from his live site and on his own declared CSS custom properties. They are NOT the generic
 * output of resolve-palette.mjs.
 *
 * Why. resolve-palette reads only three keys (palette.primary / .accent / .dark) and derives an
 * entire scheme around them. Run against this brand it produced a different design: a much darker
 * page ground (#07090c), a dimmed cool text grey (#ccd2d7 rather than his #F4F4F5), and a nudged
 * red (#ea3d49 rather than his #E63946, which is triple-confirmed in his stylesheet, his
 * theme-color meta and the flat field of his maskable icon). Shipping that would have meant
 * shipping a visibly different design from the one the brief argues to the client, and it would
 * have quietly altered a brand colour its owner chose. The resolver did run (24 tokens, 0 contrast
 * failures) and its semantic ramp is kept below; what it does not get to do is redesign the page.
 *
 * VERIFICATION. Every pair below was computed against the WCAG floor, not eyeballed:
 *
 *   text    #F4F4F5 on ground #14161A   16.48   floor 4.5   ok
 *   text    #F4F4F5 on panel  #1F2126   14.65   floor 4.5   ok
 *   text    #F4F4F5 on ember  #2A2016   14.51   floor 4.5   ok
 *   muted   #8A8A8D on ground #14161A    5.26   floor 4.5   ok
 *   muted   #8A8A8D on panel  #1F2126    4.68   floor 4.5   ok
 *   muted   #8A8A8D on ember  #2A2016    4.63   floor 4.5   ok
 *   quiz green #3A9D5D on ground         5.31   floor 3.0   ok
 *   white on his red    #E63946          4.17   floor 4.5   FAIL  <- why the button fill is deepened
 *   white on deepened   #C42E3A          5.53   floor 4.5   ok
 *   his red as TEXT on ground            4.35   floor 4.5   FAIL  <- see the hard rule below
 *
 * HARD RULE FOR THE BUILD. The signal red is a BUTTON FILL and a HAIRLINE RULE only. It must never
 * be used as text, a link colour, or an icon glyph on the page ground: at 4.35 it fails the floor.
 * A decorative rule carries no text and is not bound by the ratio; a word is.
 */

:root {
  /* Ground ladder - the page is a gallery wall, not a photograph */
  --ground: #14161A;        /* his own --color-surface, promoted to the page ground */
  --panel: #1F2126;         /* the solid panel headline type sits on beside a photograph */
  --ember: #2A2016;         /* sampled from the warm ground under his contact photograph */

  /* Type */
  --text: #F4F4F5;          /* his --color-text, exact */
  --muted: #8A8A8D;         /* his --color-text-muted, exact */

  /* The one accent, used with discipline */
  --red: #E63946;           /* his signal red, exact. RULE AND FILL ONLY, never text */
  --red-fill: #C42E3A;      /* the button fill: same red to the eye, readable in white */
  --red-hover: #EF4F5B;     /* his own declared hover */
  --on-red: #FFFFFF;

  /* His quiz green - the only non-red chromatic colour on his site */
  --quiz-correct: #3A9D5D;

  /* Hairlines */
  --hairline: rgba(244, 244, 245, 0.10);
  --hairline-strong: rgba(244, 244, 245, 0.18);

  /* Focus - visible on a dark photographic ground */
  --focus-ring: #F4F4F5;

  /* Type scale - display never above weight 500 (see PITCH-PLAN.md) */
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Geist", system-ui, sans-serif;

  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.09rem);
  --step-1: clamp(1.27rem, 1.2rem + 0.35vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.45rem + 0.75vw, 2.07rem);
  --step-3: clamp(2.03rem, 1.75rem + 1.4vw, 2.85rem);
  --step-4: clamp(2.57rem, 2.05rem + 2.6vw, 3.91rem);
  --step-5: clamp(3.25rem, 2.35rem + 4.5vw, 5.37rem);

  /* Spacing */
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  --measure: 62ch;
  --container: 1440px;      /* capped: the photographs top out at 1920 intrinsic pixels */
}

/* Semantic ramp carried over from resolve-palette's verified run. Retained for completeness;
   this page has no forms and no alerts, so most of it should go unused. */
:root {
  --success: #429c5a;
  --warning: #b37903;
  --error: #c8645a;
  --info: #418ad1;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}