/* ScreenQube design tokens — "Ember": warm light, soft depth, rounded, red-led. Light theme and the #C41E3A brand red are both LOCKED by the business; [FIX-1..3] mark the 2026-08-20 axe-core contrast fixes. */

:root{
  color-scheme: light;   /* pinned — no UA darkening of controls */

  /* Surfaces — warm, never clinical white */
  --page:   #FDFBFA;   /* page ground — white with a trace of warmth      */
  --white:  #FFFFFF;   /* cards, tiles, inputs — lift by being whiter     */
  --sand:   #F7F3F1;   /* alternate section band                          */
  --mist:   #F2EEEC;   /* tracks, wells                                   */
  --blush:  #FEF2F4;   /* red-tinted wash under key sections              */
  --peach:  #FFF5EF;   /* warm wash, used sparingly                       */
  --line:   #EFE9E7;   /* hairline borders                                */
  --line-2: #E4DCD9;   /* stronger borders, dividers                      */

  /* [FIX-1] WCAG 1.4.11 wants 3:1 on control boundaries; --line is 1.1:1 and --line-2 is 1.3:1 on white, so neither can carry one. */
  --line-3: #9A8E92;   /* control boundaries only        3.15:1 on white  */

  /* Ink — soft near-black, never #000 */
  --ink:   #191416;    /* headings and body            17.7:1 on --page   */
  --ink-2: #5C5257;    /* secondary text                7.3:1             */

  /* [FIX-2] --ink-3 was #8B8085 at 3.7:1, marked "large text only" — but captions are 11–15px, so axe found 24 failing nodes; darkened to clear AA on both grounds. */
  --ink-3: #6F6469;    /* captions, meta   5.5:1 on --page · 5.1:1 --sand */
  --ink-4: #ADA3A7;    /* disabled, quiet marks — NOT for body text       */
  --ink-quiet: #8B8085;/* DECORATIVE ONLY — 3.7:1, fails AA as text       */

  /* Red — the brand, used generously */
  --red:      #C41E3A; /* 5.7:1 on --page · 5.8:1 white-on-red · AA both  */

  /* [FIX-3] white on the old #E8344F gradient start measured 4.17:1, so the light third of every primary button failed AA at 15–18px/600; the ramp is darkened. */
  --red-hot:  #D9273F; /* bright end of the gradient · white on it 4.9:1  */
  --red-deep: #96152C; /* pressed / active                                */
  --red-soft: #F6B3BF; /* scrollbars, quiet marks — non-text              */
  --red-wash: #FDEBEE; /* icon chips, tint fills                          */

  --grad:      linear-gradient(135deg,#D9273F 0%,#C41E3A 100%);
  --grad-soft: linear-gradient(135deg,#FFF1F3 0%,#FFE7EC 100%);

  /* Radius — the biggest visual shift from the old direction */
  --r-xs:    8px;
  /* Device bezel: room light falls from above, so it runs warm at the top and near-black at the bottom. */
  --bezel-hi: #2B2226;
  --bezel-mid:#1A1417;
  --bezel-lo: #0F0B0D;

  --r-sm:   12px;
  --r:      16px;
  --r-lg:   22px;
  --r-xl:   30px;
  --r-2xl:  40px;
  --r-pill: 999px;   /* ALL buttons, badges, and the nav                  */

  /* Depth — soft, layered, warm-tinted */
  --sh-1: 0 1px 2px rgba(25,20,22,.04), 0 1px 3px rgba(25,20,22,.03);
  --sh-2: 0 6px 18px -4px rgba(25,20,22,.07), 0 2px 6px -2px rgba(25,20,22,.04);
  --sh-3: 0 18px 40px -12px rgba(25,20,22,.13), 0 6px 16px -6px rgba(25,20,22,.07);
  --sh-4: 0 40px 80px -24px rgba(25,20,22,.20), 0 12px 32px -12px rgba(25,20,22,.10);
  --sh-red: 0 14px 34px -10px rgba(196,30,58,.42);
  --sh-red-hover: 0 20px 44px -12px rgba(196,30,58,.55);

  /* Type */
  --f:      "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --f-serif:"Instrument Serif", Georgia, serif;   /* italic accents only  */
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --t-d1:   clamp(2.6rem, 7vw,   5.4rem);   /* hero            800/-.045em */
  --t-d2:   clamp(2rem,   4.6vw, 3.4rem);   /* section head    800/-.04em  */
  --t-h1:   clamp(1.6rem, 3vw,   2.4rem);   /* 700/-.03em                  */
  --t-h2:   clamp(1.15rem,1.7vw, 1.4rem);   /* 700/-.025em                 */
  --t-h3:   1.02rem;                        /* 600/-.02em                  */
  --t-body: clamp(1rem,   1.2vw, 1.15rem);  /* 400/1.6                     */
  --t-sm:   0.9375rem;
  --t-xs:   0.8125rem;
  --t-lab:  0.6875rem;                      /* 700 uppercase +.08em        */

  --measure: 48ch;      /* body max width — deliberately short */

  /* Space — 8px base */
  --s1:4px; --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:88px; --s10:120px;
  --max: 1280px;
  --pad: clamp(18px, 4vw, 56px);

  /* Motion */
  --e:        cubic-bezier(.22, 1, .36, 1);     /* default             */
  --e-spring: cubic-bezier(.34, 1.56, .64, 1);  /* buttons, playful    */
  --dur-fast: 160ms;
  --dur:      250ms;
  --dur-slow: 700ms;
  --stagger:   80ms;

  /* Z-index */
  --z-nav:20; --z-float:40; --z-modal:50; --z-prog:99;
}

/* Buttons — pill, gradient, lifting */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:0; border-radius:var(--r-pill); cursor:pointer; text-decoration:none;
  font-family:var(--f); font-size:var(--t-sm); font-weight:600; letter-spacing:-.01em;
  padding:14px 26px; min-height:48px;
  transition:transform var(--dur) var(--e-spring),
             box-shadow var(--dur) var(--e),
             background var(--dur) var(--e),
             color var(--dur) var(--e);
}
.btn--primary{ background:var(--grad); color:#fff; box-shadow:var(--sh-red); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:var(--sh-red-hover); color:#fff; }
.btn--ghost{ background:var(--white); color:var(--red); border:1px solid var(--line-2); box-shadow:var(--sh-2); }
.btn--ghost:hover{ transform:translateY(-2px); box-shadow:var(--sh-3); background:var(--red-wash); color:var(--red); }
.btn:active{ transform:translateY(0); }

/* Cards & tiles — rounded, lifting on hover */
.tile{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s6); box-shadow:var(--sh-1);
  transition:transform 350ms var(--e), box-shadow 350ms var(--e);
}
.tile:hover{ transform:translateY(-4px); box-shadow:var(--sh-3); }
.tile--wash{ background:var(--grad-soft); border-color:#FBDCE2; }
.tile--dark{ background:var(--ink); color:var(--white); border-color:transparent; }

/* Icon chip — rounded square, red wash, red glyph */
.chip{
  width:44px; height:44px; border-radius:var(--r-sm);
  display:grid; place-items:center;
  background:var(--red-wash); color:var(--red);
}

/* Big figures take the gradient. inline-block + fit-content is load-bearing: with display:block the gradient spans the full width and a short glyph samples only the first slice, so --red never appears in the number. */
.figure{
  display:inline-block; width:fit-content;
  font-weight:800; letter-spacing:-.045em; line-height:1;
  font-variant-numeric:tabular-nums;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Bento grid — 6 columns, mixed spans */
.bento{ display:grid; gap:var(--s4); grid-template-columns:1fr; }
@media(min-width:720px){ .bento{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1040px){
  .bento{ grid-template-columns:repeat(6,1fr); }
  .span-2{grid-column:span 2} .span-3{grid-column:span 3}
  .span-4{grid-column:span 4} .span-6{grid-column:span 6}
}

/* Accessibility */
/* No border-radius here: it would change the ELEMENT's radius, not the outline's, and snapped every pill button to 8px while focused. */
:focus-visible{
  outline:2px solid var(--red);
  outline-offset:3px;
}
/* --red is ~3.1:1 on --ink, only just clearing 1.4.11, so on ink grounds the ring goes white instead. */
.tile--dark :focus-visible,
.cta-panel :focus-visible{ outline-color:var(--white); }

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

/* DO NOT ADD: a prefers-color-scheme:dark or [data-theme] block (locked by the business), a second accent colour, sharp-cornered buttons, or a border-radius inside :focus-visible. */