/* ============================================================
   SELR AI — DESIGN LANGUAGE TOKENS
   Measured off the live site (www.selrai.com.au), not eyeballed.
   Every value here was read from computed styles on the rendered
   DOM or counted in the site's own CSS. Frequency counts in
   references/01-tokens.md.

   Supersedes the type scale in selr-ui-kit/tokens.css for anything
   VISUAL that ships (web, social, video, decks). The legacy
   Soft River scale is retained there for print/stationery only.
   ============================================================ */

:root {
  /* ---------- CANVAS & SURFACES ----------
     The site is never pure white. Warm off-white is the ground. */
  --selr-canvas:        #F7F5EF;  /* page ground, warm off-white (114 uses) */
  --selr-surface:       #FFFFFA;  /* card fill, warmest near-white (125 uses) */
  --selr-surface-2:     #FCFCFA;  /* secondary near-white */
  --selr-surface-3:     #FAFAF7;  /* input focus / tertiary fill */

  /* Dark surfaces */
  --selr-surface-dark:  #242424;  /* dark card fill (97 uses) */
  --selr-phantom:       #1E1E24;  /* deepest UI surface (62 uses) */
  --selr-near-black:    #161920;  /* imagery near-black, blue-leaning */

  /* Glass — the house frosted treatment */
  --selr-glass:         rgba(255, 255, 255, 0.35);  /* fill (100 uses) */
  --selr-glass-hair:    rgba(227, 227, 227, 0.45);  /* 1px hairline border */
  --selr-glass-blur:    blur(10px);                 /* backdrop-filter (73 uses) */
  --selr-scrim:         rgba(0, 0, 0, 0.45);        /* image darkening layer */

  /* ---------- INK ----------
     #242424 and #616161 are the real rendered pair. The template
     declares #292929 as a default but it renders on 3 elements
     site-wide — do not use it. */
  --selr-ink:            #242424;                  /* primary text (329 rendered) */
  --selr-ink-muted:      #616161;                  /* secondary text (332 rendered) */
  --selr-ink-invert:     #FFFFFA;                  /* text on dark */
  --selr-ink-invert-2:   #FCFCFA;                  /* headings on dark */
  --selr-ink-invert-mut: rgba(255, 255, 255, 0.75);/* muted text on dark */
  --selr-ink-on-purple:  #EEE8FF;                  /* body text on purple fill */

  /* ---------- ACCENT ----------
     ONE accent. The site has no secondary brand colour. */
  --selr-purple:        #6736E2;
  --selr-purple-press:  #5024C0;  /* pressed / darker hover */
  --selr-error:         #C25D5D;

  /* ---------- SHAPE ----------
     Three tiers, and they are strict. */
  --selr-r-field:  20px;   /* inputs, small chips, inner tiles */
  --selr-r-card:   30px;   /* THE card radius (224 uses) */
  --selr-r-pill:   40px;   /* buttons, chips, hero band, big images */
  --selr-r-round:  100%;   /* avatars, dots, icon badges (361 uses) */

  /* ---------- ELEVATION ----------
     There is no drop-shadow system. Depth comes from colour,
     blur and radius. Rings are used instead of shadows. */
  --selr-ring-light: 0 0 0 2px rgba(255, 255, 255, 0.75);
  --selr-ring-dark:  0 0 0 2px #242424;
  --selr-ring-canvas: 0 0 0 2px #F7F5EF;

  /* Keyboard focus. The site shipped without one — fields only filled in their
     background, which is easy to miss. Purple on canvas is 6.01:1, well past
     the 3:1 WCAG needs for a non-text indicator. */
  --selr-focus:        #6736E2;
  --selr-focus-width:  2px;
  --selr-focus-offset: 2px;

  /* ---------- SPACE ----------
     5px base unit. 20 and 10 carry the system. */
  --selr-space-1:   5px;
  --selr-space-2:  10px;
  --selr-space-3:  15px;
  --selr-space-4:  20px;   /* default gap (210 uses) + page gutter */
  --selr-space-5:  25px;
  --selr-space-6:  30px;
  --selr-space-7:  50px;
  --selr-space-8:  80px;
  --selr-space-9: 120px;   /* section vertical padding */

  /* ---------- LAYOUT ---------- */
  --selr-gutter:      20px;    /* card inset from viewport edge */
  --selr-card-inset:  40px;    /* content inset inside a card */
  --selr-container: 1600px;    /* max content width */
  --selr-bp-mobile:  810px;    /* Framer's own breakpoints */
  --selr-bp-tablet: 1200px;

  /* ---------- TYPE ----------
     Manrope everywhere. Display uses the VARIABLE face driven to
     wght 585 — not 400, not 600. That 585 is the site's signature
     heading weight. Body/UI uses static Manrope 600.
     Tracking rule: -0.04em >= 25px, -0.03em 15-20px, -0.025em 13px. */
  --selr-font-display: 'Manrope Variable', 'Manrope', sans-serif;
  --selr-font:         'Manrope', sans-serif;
  --selr-display-wght:    585;  /* headings — the signature weight */
  --selr-display-wght-xl: 500;  /* the giant one-word display ("Services.") runs LIGHTER */

  /* size / line-height / tracking */
  --selr-t-display-xl: 120px;  --selr-lh-display-xl: 1.00;  --selr-ls-display-xl: -0.04em;
  --selr-t-display:     80px;  --selr-lh-display:    1.05;  --selr-ls-display:    -0.04em;
  --selr-t-h2:          60px;  --selr-lh-h2:         1.05;  --selr-ls-h2:         -0.04em;
  --selr-t-h3:          45px;  --selr-lh-h3:         1.10;  --selr-ls-h3:         -0.04em;
  --selr-t-h4:          30px;  --selr-lh-h4:         1.30;  --selr-ls-h4:         -0.04em;
  --selr-t-h5:          25px;  --selr-lh-h5:         1.30;  --selr-ls-h5:         -0.03em;
  --selr-t-lead:        20px;  --selr-lh-lead:       1.35;  --selr-ls-lead:       -0.03em;
  --selr-t-body:        17px;  --selr-lh-body:       1.50;  --selr-ls-body:       -0.03em;
  --selr-t-body-sm:     15px;  --selr-lh-body-sm:    1.50;  --selr-ls-body-sm:    -0.03em;
  --selr-t-meta:        13px;  --selr-lh-meta:       1.50;  --selr-ls-meta:       -0.025em;
  --selr-t-fine:        12px;  --selr-lh-fine:       1.20;  --selr-ls-fine:       -0.015em;
  --selr-t-stat:        54px;  /* big stat numerals */

  /* 13px never scales. It is the same size on every breakpoint — the site's
     floor for readable meta text. Do not shrink it on mobile. */

  /* ---------- MOTION ----------
     Three curves, and they have distinct jobs. Counted in the
     site's own compiled CSS — these are not preferences. */
  --selr-ease:        cubic-bezier(0.4, 0, 0.2, 1);    /* #1 standard: fades, fills, inputs */
  --selr-ease-sym:    cubic-bezier(0.44, 0, 0.56, 1);  /* #2 symmetric: colour + text transitions */
  --selr-ease-over:   cubic-bezier(0.22, 1, 0.36, 1);  /* #3 overshoot: structural widen/open */

  --selr-dur-fast:    200ms;  /* background, opacity, icon fill */
  --selr-dur-base:    300ms;  /* colour, hover fills */
  --selr-dur-move:    400ms;  /* structural: width, height, transform */
  --selr-dur-slow:    550ms;  /* image zoom, panel reveals */

  /* Entrance distances — three tiers, measured off the appear JSON */
  --selr-rise-hero:   50px;   /* hero text blocks, with scale 0.9 -> 1 */
  --selr-rise-body:   40px;   /* below-fold content, no scale */
  --selr-rise-chrome: 10px;   /* small badges/buttons, with scale 0.9 -> 1 */
  --selr-stagger:      50ms;  /* between sibling elements */
  --selr-stagger-word: 20ms;  /* between words inside a heading */
}

/* ============================================================
   BASE — apply the language
   ============================================================ */

body {
  background: var(--selr-canvas);
  color: var(--selr-ink);
  font-family: var(--selr-font);
  font-size: var(--selr-t-body-sm);
  font-weight: 600;
  line-height: var(--selr-lh-body-sm);
  letter-spacing: var(--selr-ls-body-sm);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .selr-display {
  font-family: var(--selr-font-display);
  font-variation-settings: 'wght' var(--selr-display-wght);
  font-weight: 400;          /* the axis does the weight, not this */
  margin: 0;
}

h1 { font-size: var(--selr-t-display);   line-height: var(--selr-lh-display);   letter-spacing: var(--selr-ls-display); }
h2 { font-size: var(--selr-t-h2);        line-height: var(--selr-lh-h2);        letter-spacing: var(--selr-ls-h2); }
h3 { font-size: var(--selr-t-h4);        line-height: var(--selr-lh-h4);        letter-spacing: var(--selr-ls-h4); }

/* Two-tone heading — the house emphasis device.
   Lead clause in ink, resolving clause in muted grey. */
.selr-dim { color: var(--selr-ink-muted); }

/* ============================================================
   COMPONENTS
   ============================================================ */

/* --- The pill button. Every button carries a dot. --- */
.selr-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--selr-space-2);
  padding: 15px 20px;
  border-radius: var(--selr-r-pill);
  border: 0;
  text-decoration: none;   /* buttons are often <a> — never let the underline through */
  font-family: var(--selr-font);
  font-size: var(--selr-t-body);
  font-weight: 600;
  letter-spacing: var(--selr-ls-body);
  line-height: 1.5;
  cursor: pointer;
  transition: background-color var(--selr-dur-base) var(--selr-ease),
              color var(--selr-dur-base) var(--selr-ease);
}
.selr-btn .dot {
  width: 10px; height: 10px;
  border-radius: var(--selr-r-round);
  flex: none;
  transition: background-color var(--selr-dur-base) var(--selr-ease);
}

/* Purple button: ink dot, inverting to white on hover */
.selr-btn--purple { background: var(--selr-purple); color: var(--selr-ink-invert); }
.selr-btn--purple .dot { background: var(--selr-ink); }
.selr-btn--purple:hover { background: var(--selr-purple-press); }
.selr-btn--purple:hover .dot { background: var(--selr-ink-invert); }

/* Dark button: purple dot, background flips to purple on hover */
.selr-btn--dark { background: var(--selr-surface-dark); color: var(--selr-ink-invert); }
.selr-btn--dark .dot { background: var(--selr-purple); }
.selr-btn--dark:hover { background: var(--selr-purple); }
.selr-btn--dark:hover .dot { background: var(--selr-ink-invert); }

/* --- Cards --- */
.selr-card {
  background: var(--selr-surface);
  border-radius: var(--selr-r-card);
  padding: var(--selr-card-inset);
}
.selr-card--dark   { background: var(--selr-surface-dark); color: var(--selr-ink-invert); }
.selr-card--purple { background: var(--selr-purple);       color: var(--selr-ink-on-purple); }
.selr-card--purple h1, .selr-card--purple h2, .selr-card--purple h3 { color: var(--selr-ink-invert-2); }

/* --- Glass panel: the frosted overlay used on photography --- */
.selr-glass {
  background: var(--selr-glass);
  -webkit-backdrop-filter: var(--selr-glass-blur);
  backdrop-filter: var(--selr-glass-blur);
  border: 1px solid var(--selr-glass-hair);
  border-radius: var(--selr-r-card);
  padding: var(--selr-space-4);
}

/* --- Chip: outlined pill, used for "what we offer" and form choices --- */
.selr-chip {
  display: inline-flex;
  align-items: center;
  padding: 9px 15px;
  border-radius: var(--selr-r-pill);
  background: var(--selr-glass);
  border: 1px solid var(--selr-glass-hair);
  font-size: var(--selr-t-meta);
  font-weight: 600;
  letter-spacing: var(--selr-ls-meta);
}
.selr-chip[aria-pressed='true'] { background: var(--selr-purple); color: #fff; border-color: transparent; }

/* --- Stat: big numeral + small purple suffix --- */
.selr-stat__num {
  font-family: var(--selr-font-display);
  font-variation-settings: 'wght' var(--selr-display-wght);
  font-size: var(--selr-t-stat);
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.selr-stat__suffix { color: var(--selr-purple); font-size: 0.4em; vertical-align: super; }
.selr-stat__label  { font-size: var(--selr-t-meta); color: var(--selr-ink-muted); letter-spacing: var(--selr-ls-meta); }

/* --- Icons: stroke-only, never filled, never purple --- */
.selr-icon {
  width: 25px; height: 25px;
  fill: transparent;
  stroke: currentColor;
  stroke-width: 2.5;            /* 2 large · 2.5 stat/card · 3–3.5 small UI */
  stroke-linecap: round;
  stroke-linejoin: round;
}
.selr-icon-tile {               /* the white circle icons usually sit in */
  width: 25px; height: 25px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--selr-surface);
  border-radius: var(--selr-r-round);
  color: var(--selr-ink);
}

/* --- Inline link: always-on purple underline, ink text --- */
.selr-link {
  color: var(--selr-ink);
  text-decoration: underline;
  text-decoration-color: var(--selr-purple);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  transition: color 600ms var(--selr-ease),
              text-decoration-color 600ms var(--selr-ease),
              text-decoration-thickness 600ms var(--selr-ease),
              text-underline-offset 600ms var(--selr-ease);
}

/* --- Field: focus solidifies the fill, it does not add a ring --- */
.selr-field {
  border-radius: var(--selr-r-field);
  background: var(--selr-glass);
  border: 1px solid var(--selr-glass-hair);
  padding: 12px 16px;
  font-family: var(--selr-font);
  font-size: 16px; font-weight: 500;
  letter-spacing: var(--selr-ls-body);
  color: var(--selr-ink);
}
.selr-field::placeholder { color: var(--selr-ink-muted); }
.selr-field.is-invalid { border-color: var(--selr-error); }

/* --- Keyboard focus ---
   The site shipped without one; fields only filled in their background, which is
   easy to miss. Added 2026-08-13 on Luke's call.

   :focus-visible splits by element type, and that is the spec, not a quirk:
     buttons, links, chips  → ring on KEYBOARD focus only, nothing changes for a
                              mouse user (verified by real click: focus-visible false)
     text inputs, textareas → ring on click too, because anything accepting text
                              entry always matches :focus-visible (verified)
   Fields keep their background fill-in and gain the ring on top. */
.selr-field:focus-within,
.selr-field:focus { background: var(--selr-surface-3); }

.selr-field:focus-visible,
.selr-field:has(:focus-visible),
.selr-btn:focus-visible,
.selr-chip:focus-visible,
.selr-link:focus-visible,
.selr-play:focus-visible,
.selr-dot:focus-visible,
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: var(--selr-focus-width) solid var(--selr-focus);
  outline-offset: var(--selr-focus-offset);
  border-radius: inherit;
}

/* On purple or dark fills the purple ring disappears — go light instead. */
.selr-card--purple :focus-visible,
.selr-card--dark   :focus-visible,
.selr-btn--purple:focus-visible,
.selr-band-purple  :focus-visible {
  outline-color: var(--selr-ink-invert);
}

/* --- Play button: one glass circle, three sizes --- */
.selr-play {
  width: 44px; height: 44px;           /* 80 hero · 44 panel · 22 clip */
  border-radius: var(--selr-r-round);
  background: var(--selr-glass);
  -webkit-backdrop-filter: var(--selr-glass-blur);
  backdrop-filter: var(--selr-glass-blur);
  border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform var(--selr-dur-move) var(--selr-ease-over),
              background-color var(--selr-dur-move) var(--selr-ease);
}
.selr-play:hover { transform: scale(1.08); background: rgba(255,255,255,0.5); }

/* --- Badge: the dark pill --- */
.selr-badge {
  display: inline-flex; align-items: center;
  height: 30px; padding: 0 14px;
  border-radius: var(--selr-r-card);
  background: var(--selr-surface-dark);
  color: var(--selr-ink-invert);
  font-size: var(--selr-t-meta); font-weight: 600;
  letter-spacing: var(--selr-ls-meta);
}

/* --- Dot pagination: the active dot MORPHS into a pill --- */
.selr-dot {
  width: 30px; height: 24px;    /* widens to fit the morphed pill */
  padding: 0;                   /* buttons carry default padding — it squashes the pill */
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
}
.selr-dot i {
  width: 7px; height: 7px; border-radius: var(--selr-r-round);
  background: rgba(255,255,255,0.5); display: block; flex: none;
  transition: width var(--selr-dur-move) var(--selr-ease-over),
              height var(--selr-dur-move) var(--selr-ease-over),
              border-radius var(--selr-dur-move) var(--selr-ease-over),
              background-color var(--selr-dur-base) var(--selr-ease);
}
.selr-dot[aria-current='true'] i {
  width: 22px; height: 4px; border-radius: 4px;
  background: var(--selr-purple);
}

/* --- The purple sandwich: full-bleed purple wrapping a canvas card --- */
.selr-band-purple {
  background: var(--selr-purple);
  padding: var(--selr-space-7) var(--selr-gutter);
}
.selr-band-purple > .selr-band-card {
  background: var(--selr-canvas);
  border-radius: var(--selr-r-pill);
  padding: var(--selr-card-inset);
  max-width: var(--selr-container);
  margin: 0 auto;
}

/* ============================================================
   MOTION — entrance, hover, ambient
   ============================================================ */

/* Entrance. Opacity starts at 0.001, never true 0 — the site's own
   convention, and it avoids a browser repaint flash. */

@keyframes selr-rise-hero {
  from { opacity: 0.001; transform: translateY(var(--selr-rise-hero)) scale(0.9); }
  to   { opacity: 1; transform: none; }
}
@keyframes selr-rise-body {
  from { opacity: 0.001; transform: translateY(var(--selr-rise-body)); }
  to   { opacity: 1; transform: none; }
}
@keyframes selr-rise-chrome {
  from { opacity: 0.001; transform: translateY(var(--selr-rise-chrome)) scale(0.9); }
  to   { opacity: 1; transform: none; }
}

/* Hero blocks: heavy damped spring. CSS cannot spring, so this is the
   closest tween — use a real spring (stiffness 825, damping 84, mass 3.2)
   whenever the platform allows it (Framer Motion, Lottie, After Effects). */
.selr-rise-hero   { animation: selr-rise-hero 700ms var(--selr-ease-over) both; }
.selr-rise-body   { animation: selr-rise-body var(--selr-dur-slow) var(--selr-ease) both; }
.selr-rise-chrome { animation: selr-rise-chrome 460ms var(--selr-ease-over) both; }

/* Sibling stagger: 50ms. Resist the urge to slow it down. */
.selr-stagger > *:nth-child(2) { animation-delay: calc(var(--selr-stagger) * 1); }
.selr-stagger > *:nth-child(3) { animation-delay: calc(var(--selr-stagger) * 2); }
.selr-stagger > *:nth-child(4) { animation-delay: calc(var(--selr-stagger) * 3); }
.selr-stagger > *:nth-child(5) { animation-delay: calc(var(--selr-stagger) * 4); }

/* ---- The heading reveal: our signature type motion ----
   One span per WORD (never per character). Four properties move together —
   the blur is what makes it read like a camera pulling focus.
   Markup:  <h1 class="selr-reveal"><span>Your</span> <span>AI</span> …</h1>  */

@keyframes selr-word-in {
  from { opacity: 0.001; filter: blur(5px); transform: translateY(2px) scale(0.9); }
  to   { opacity: 1;     filter: blur(0);   transform: none; }
}

.selr-reveal > span {
  display: inline-block;
  animation: selr-word-in 660ms var(--selr-ease-over) both;
}
.selr-reveal > span:nth-child(1)  { animation-delay: calc(var(--selr-stagger-word) * 0); }
.selr-reveal > span:nth-child(2)  { animation-delay: calc(var(--selr-stagger-word) * 1); }
.selr-reveal > span:nth-child(3)  { animation-delay: calc(var(--selr-stagger-word) * 2); }
.selr-reveal > span:nth-child(4)  { animation-delay: calc(var(--selr-stagger-word) * 3); }
.selr-reveal > span:nth-child(5)  { animation-delay: calc(var(--selr-stagger-word) * 4); }
.selr-reveal > span:nth-child(6)  { animation-delay: calc(var(--selr-stagger-word) * 5); }
.selr-reveal > span:nth-child(7)  { animation-delay: calc(var(--selr-stagger-word) * 6); }
.selr-reveal > span:nth-child(8)  { animation-delay: calc(var(--selr-stagger-word) * 7); }
.selr-reveal > span:nth-child(9)  { animation-delay: calc(var(--selr-stagger-word) * 8); }
.selr-reveal > span:nth-child(10) { animation-delay: calc(var(--selr-stagger-word) * 9); }
.selr-reveal > span:nth-child(n+11) { animation-delay: calc(var(--selr-stagger-word) * 10); }

/* The paragraph under a heading is ONE unit. Never split it per letter. */
.selr-reveal-block {
  animation: selr-word-in 860ms var(--selr-ease-over) both;
  animation-delay: 200ms;   /* trails the heading, as the site does */
}

/* Image hover: a slow, small zoom. Never a lift, never a shadow. */
.selr-media { overflow: hidden; border-radius: var(--selr-r-card); }
.selr-media img { display: block; width: 100%; transition: transform var(--selr-dur-slow) var(--selr-ease-over); }
.selr-media:hover img { transform: scale(1.03); }

/* Press: the whole control dips slightly. */
.selr-btn:active { transform: scale(0.98); }

@media (prefers-reduced-motion: reduce) {
  .selr-rise-hero, .selr-rise-body, .selr-rise-chrome,
  .selr-reveal > span, .selr-reveal-block { animation: none; }
  .selr-media img, .selr-btn, .selr-btn .dot { transition: none; }
}

/* ============================================================
   RESPONSIVE — Framer's own breakpoints
   ============================================================ */

/* Measured at 1000px (tablet tier) and 500px (mobile tier) on the live site
   with a real CDP resize. These are the site's own values, not a ramp. */

@media (max-width: 1199px) {
  :root {
    --selr-t-display-xl: 80px;   --selr-lh-display-xl: 1.00;
    --selr-t-display:    60px;   --selr-lh-display:    1.05;
    --selr-t-h3:         30px;   --selr-lh-h3:         1.10;
    --selr-t-h4:         25px;   --selr-lh-h4:         1.30;
    --selr-t-lead:       19px;   --selr-lh-lead:       1.35;
    --selr-t-body:       17px;   --selr-lh-body:       1.35;
    --selr-t-stat:       54px;
    --selr-card-inset:   40px;
  }
}

@media (max-width: 809px) {
  :root {
    --selr-t-display-xl: 50px;   --selr-lh-display-xl: 1.00;
    --selr-t-display:    35px;   --selr-lh-display:    1.05;
    --selr-t-h3:         25px;   --selr-lh-h3:         1.10;
    --selr-t-h4:         20px;   --selr-lh-h4:         1.30;
    --selr-t-lead:       17px;   --selr-lh-lead:       1.35;
    --selr-t-body:       15px;   --selr-lh-body:       1.35;
    --selr-t-body-sm:    14px;   --selr-lh-body-sm:    1.50;
    --selr-t-stat:       48px;
    --selr-card-inset:   20px;
    --selr-space-9:      60px;   /* section padding drops to 60px 0 */
  }
}