/* ===== Brand Tokens (RV) =====
Paste your true hex values here and you're done.

Example:
:root{
  --rv-5013: #123456;  /* RV 5013 Primary */
  --rv-3007: #abcdef;  /* RV 3007 Secondary */
  --rv-135:  #fedcba;  /* RV 135  Accent */
}
*/
:root{
  /* Use your RV tokens if set; otherwise fall back to safe defaults */
  --brand-primary: var(--rv-5013, #2643e6);  /* fallback is vivid blue */
  --brand-secondary: var(--rv-3007, #0f172a);/* fallback is deep slate */
  --brand-accent: var(--rv-135, #f59e0b);    /* fallback is warm amber */

  /* System tokens derived from brand */
  --bg: #0e0f13;
  --text: #f4f6f8;
  --muted: #c2c8ce;
  --accent: var(--brand-primary);
  --accent-press: color-mix(in oklab, var(--brand-primary) 80%, black);
  --card: #171a20;
  --ring: color-mix(in oklab, var(--brand-primary) 55%, white);
  color-scheme: dark;
}

@media (prefers-color-scheme: light){
  :root{
    --bg: #ffffff;
    --text: #0e0f13;
    --muted: #3b4957;
    --card: #f4f6f8;
    --ring: color-mix(in oklab, var(--brand-primary) 45%, white);
    color-scheme: light;
  }
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  line-height:1.6;
}

.wrap{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 20px;
  padding: clamp(16px, 4vw, 48px);
}

.hero{
  width:min(720px, 100%);
  background: var(--card);
  padding: clamp(24px, 5vw, 48px);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  text-align:center;
  border: 1px solid color-mix(in oklab, var(--brand-primary) 35%, transparent);
}

h1{
  margin:0 0 8px;
  font-size: clamp(28px, 6vw, 44px);
  letter-spacing: 0.3px;
}

p{
  margin:0 0 24px;
  color: var(--muted);
  font-size: clamp(16px, 2.8vw, 18px);
}

.cta{
  display:inline-block;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--accent);
  color: white;
  text-decoration:none;
  font-weight: 700;
  letter-spacing: .3px;
  outline: none;
  border: 0;
  transition: transform .04s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 6px 16px color-mix(in oklab, var(--brand-primary) 35%, transparent);
}

.cta:focus{ box-shadow: 0 0 0 4px var(--ring); }
.cta:hover{ transform: translateY(-1px); }
.cta:active{ transform: translateY(0); background: var(--accent-press); }

.swatches{
  display:grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 12px;
  width:min(720px, 100%);
}

.swatch{
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  display:flex;
  align-items:end;
  justify-content:center;
  padding:10px;
  font-weight:700;
  letter-spacing:.2px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.s1{ background: var(--brand-primary); }
.s2{ background: var(--brand-secondary); }
.s3{ background: var(--brand-accent); }

.foot{
  margin-top: 6px;
  text-align:center;
  color: var(--muted);
}