/* Senova CPA — design tokens.
   The single place the brand is stated. Added 2026-08-09.

   Rationale (senova-os 31 §1d, 32 §2H): colours were hardcoded across eight
   <style> blocks and every inline style, so nothing could disagree with the
   brand out loud and the video kit drifted for a week unnoticed.

   The palette below is the LIVE SITE palette, which 31 §1a-bis ruled is the
   correct one for screen: it sits 3 degrees from the teal in the logo's own
   "CPA", its navy is closer to the logo than the brand document's navy, and it
   is the accessible choice (deep teal on white 5.92:1 AA; mint on navy 9.34:1
   AAA). The paid brand kit keeps print. Do not "fix" these toward the print
   swatches — that was reviewed and rejected.

   Usage: markup references var(--sen-x, #HEX) with the literal hex retained as
   a fallback, so the page renders identically if this file ever fails to load.
   When a colour changes, change it HERE and drop the fallbacks in that pass. */

:root {
  /* ---- Darks ---------------------------------------------------------- */
  --sen-navy:            #13303F;  /* primary dark: body text, dark sections   */
  --sen-navy-deep:       #11293A;  /* the "good problem" section ground        */
  --sen-navy-blue:       #1C496A;  /* CTA gradient partner, button hover       */

  /* Cards that sit ON the dark grounds are CREAM, not a lifted navy.
     History, because it was got wrong twice: they were originally
     rgba(255,255,255,.05) over navy — 1.16:1, not a visible surface at all. On
     2026-08-09 they were lifted to a navy #204657, which measured better but is
     still dark-on-dark, and the section still read as one slab. On 2026-08-10
     Sayed named the actual rule: the section can be dark, but what sits on it
     must not be. Cream cards separate at 11.40:1 and reuse the hero's own warm
     neutral, so the dark section ties into the palette instead of opposing it.
     The "good problem" tiles are deliberately the SAME hex as their ground —
     that block is hairline-separated columns, not cards, which is also how
     /about uses navy and why that page reads sharp. */
  --sen-on-dark-tile:    #A8BDC7;  /* body copy in those columns   6.03:1     */

  /* ---- Teal ramp — one hue at three values (192/192/193 deg) ---------- */
  --sen-teal-deep:       #1E6F6C;  /* L* 42 — primary action, links           */
  --sen-teal:            #2C8F8B;  /* L* 54 — accent, eyebrows, hover         */
  --sen-mint:            #8FE3DF;  /* L* 85 — accent on dark grounds          */

  /* A pale teal mid-tone ground was introduced here on 2026-08-10 and REMOVED
     the same day. It measured well — it halved the dark share of the page and
     gave the light grounds a rhythm they lack — but Sayed rejected it on sight:
     it cost the site its sharpness and read markedly less professional.
     Do not re-propose a lighter ground for the dark sections. The real defect
     was never that they are dark; it is dark-on-dark, and it is fixed by making
     what sits ON the navy light. See --sen-slate-deep below, retained because
     it is a genuinely useful darker body tone. */
  --sen-slate-deep:      #46545C;  /* body copy where --sen-slate is too light */

  /* ---- Warm neutrals -------------------------------------------------- */
  --sen-cream:           #F6F2EA;  /* page ground                             */
  --sen-cream-warm:      #F3EFE7;  /* text on dark grounds                    */
  --sen-sand:            #EFE9DC;  /* alternating section ground              */
  --sen-rule:            #E6DFD2;  /* hairlines, card borders                 */
  --sen-rule-soft:       #ECE5D8;  /* section dividers                        */
  --sen-autopilot:       #C6BBA3;  /* the "left on autopilot" line            */

  /* ---- Slate text ----------------------------------------------------- */
  --sen-slate:           #5E6B72;  /* body copy on light                      */
  --sen-slate-mid:       #6E7C83;  /* secondary copy on light                 */
  --sen-slate-light:     #8A959B;  /* axis labels, captions                   */

  /* ---- On dark grounds ------------------------------------------------ */
  --sen-on-dark:         #B7C6CE;  /* body copy on navy                       */
  --sen-on-dark-muted:   #8FA6B0;  /* tertiary copy on navy                   */
  --sen-on-dark-bright:  #EAF1F3;  /* card copy on navy                       */

  /* ---- Motion --------------------------------------------------------- */
  /* One easing curve for reveals and scrubs, one springier curve for the
     things a finger or cursor touches. 32 §4.5: motion that RESPONDS to the
     reader only — nothing here should merely move. */
  --sen-ease:            cubic-bezier(.22,.61,.36,1);
  --sen-ease-spring:     cubic-bezier(.34,1.56,.64,1);
  --sen-dur-state:       .18s;   /* hover / focus on interactive elements     */
  --sen-dur-card:        .3s;    /* card lift                                 */
  --sen-dur-reveal:      .8s;    /* section entry                             */
}

/* ---------------------------------------------------------------------- */
/* Reduced motion. 32 §2G: this was an accessibility defect, not a taste
   question — the drifting orbs and the shimmer ran unconditionally because
   support.js has no matchMedia anywhere. motion.js now checks it in JS; this
   block covers everything declared in CSS, including the decorative
   animations the JS never touches.                                         */
@media (prefers-reduced-motion: reduce) {
  :root {
    --sen-dur-state:  .01ms;
    --sen-dur-card:   .01ms;
    --sen-dur-reveal: .01ms;
  }
  /* Kill ambient drift and shimmer outright; hold decorative reveals open. */
  [data-ambient],
  [data-ambient] *,
  [data-shimmer],
  [data-pulse] {
    animation: none !important;
  }
  [data-gapfade] {
    opacity: 1 !important;
    animation: none !important;
  }
  /* Never let a scroll-driven drawing sit unfinished for someone who has
     asked the OS to stop moving things. */
  [data-scrub-draw] {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------- */
/* Interactive states. 32 §2F: the site had ZERO CSS transition rules, so
   every button, link and card changed state by snapping. This is the
   baseline pass; it is deliberately barely perceptible, because the register
   is calm.                                                                 */
a, button, summary,
[role="button"],
input[type="submit"] {
  transition:
    background-color var(--sen-dur-state) var(--sen-ease),
    border-color     var(--sen-dur-state) var(--sen-ease),
    color            var(--sen-dur-state) var(--sen-ease),
    box-shadow       var(--sen-dur-state) var(--sen-ease),
    transform        var(--sen-dur-state) var(--sen-ease-spring);
}

/* Visible focus for keyboard users. There was none. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--sen-teal, #2C8F8B);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Card lift, opted into with [data-lift]. Used on the calculator pages,
   which are the most OPERATED surface the firm has and where snapping reads
   worst (32 §2F).                                                          */
[data-lift] {
  transition:
    transform  var(--sen-dur-card) var(--sen-ease),
    box-shadow var(--sen-dur-card) var(--sen-ease),
    border-color var(--sen-dur-card) var(--sen-ease);
}
@media (hover: hover) {
  [data-lift]:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 56px -40px rgba(19,48,63,.5);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-lift]:hover { transform: none; }
}