/* kleto.com theme tokens (owner rulings 2026-10-19).
   Every colour the site paints comes from this file. site.css, pages.css
   and landing.css read these tokens, so a future theme is a change to
   this one file. Load it before site.css.

   Default theme: iridescent. A page with no data-accent keeps the
   original chrome + iridescent look (rules at the end of this file) until
   the owner approves new site colours.

   Accent pages: a few landing pages set <html data-accent="...">, each
   with its own solid accent chosen for its market (owner 2026-10-20:
   contractors amber, OpenClaw red, operations green). Every other page
   uses the default. Never fork a stylesheet for a page colour; add or
   change a set here.

   Iridescence stays on accent pages in the keeps only: the Kleto 64 hero
   (model, badges, loading aurora), the Nexus egg and the Pulse live dot. */

:root {
  /* Chrome and graphite base. */
  --bg: #000;
  --surface: #0a0a0a;
  --raise: #111;
  --line: #1f1f1f;
  --line-2: #2e2e2e;
  --mark: #4a4a4a;
  --muted: #a1a1a1;
  --dim: #7c7c7c; /* 4.5:1 or better on #000 to #111 (WCAG AA small text) */
  --ink: #ededed;
  --white: #fff;

  /* Accent token shape. Values here are the amber set; every accent page
     overrides them below. Default pages do not read them. */
  --acc: #F5A524;        /* fills: buttons, chosen day, ticks, dots */
  --acc-hover: #FFB84D;
  --acc-press: #D98B0B;
  --acc-ink: #000;       /* label on an accent fill */
  --acc-text: #F5A524;   /* accent text and the sheen on black */
  --acc-tint: #1A1407;   /* surface behind a lit tag */
  --acc-rgb: 245, 165, 36; /* glows, halos, hairline centres */

  /* Danger text for form errors on accent pages. */
  --err: #ff6b5e;

  /* The iridescent gradient: the default theme and the Nexus egg. */
  --iri: linear-gradient(100deg, #7cf7ff 0%, #b18cff 35%, #ff9ad5 65%, #fff1a8 100%);
}

/* Per page accents: one hue per page, never shared. Each set
   passes WCAG AA: label on fill, hover and pressed; text on #000, #111
   and its tint. Ratios: label on fill / text on #000. */

/* Signal Amber, /for/contractors: job site safety colour. 10.29 / 10.29 */
:root[data-accent="amber"] {
  --acc: #F5A524; --acc-hover: #FFB84D; --acc-press: #D98B0B;
  --acc-ink: #000; --acc-text: #F5A524; --acc-tint: #1A1407; --acc-rgb: 245, 165, 36;
}
/* Lobster Red, /services/openclaw: the OpenClaw lobster. 6.44 / 7.65 */
:root[data-accent="red"] {
  --acc: #FF4F3F; --acc-hover: #FF6E60; --acc-press: #E03A2B;
  --acc-ink: #000; --acc-text: #FF6E60; --acc-tint: #1F0A08; --acc-rgb: 255, 79, 63;
}
/* Signal Green, /for/operations: all systems green. 9.22 / 12.05 */
:root[data-accent="green"] {
  --acc: #22C55E; --acc-hover: #4ADE80; --acc-press: #16A34A;
  --acc-ink: #000; --acc-text: #4ADE80; --acc-tint: #07180D; --acc-rgb: 34, 197, 94;
}

/* Derived: computed on the root, after the accent is chosen. */
:root {
  /* Headline sheen: the accent with a chrome glint. Same 8s animation. */
  --sheen: linear-gradient(100deg, var(--acc-text) 0%, var(--acc-text) 38%, #fff 50%, var(--acc-text) 62%, var(--acc-text) 100%);
}

/* ------------------------------------------------------------------
   Default theme: iridescent (owner correction 2026-10-19). A page with
   no data-accent keeps the original chrome + iridescent look until the
   owner approves new site colours. These rules restore the treatment
   that shipped before the accent work, scoped to such pages. A page
   with data-accent uses the solid accent rules in site.css instead.
   ------------------------------------------------------------------ */
:root:not([data-accent]) ::selection { background: #b18cff; color: #000; }
/* Iridescent selection (js/iri-select.js): the Highlight API paints the
   selection word by word in eight steps. While it is active, the native
   solid violet steps aside. */
:root.iri-select:not([data-accent]) ::selection { background: transparent; color: inherit; }
:root:not([data-accent]) ::highlight(iri-0) { background-color: #7cf7ff; color: #000; }
:root:not([data-accent]) ::highlight(iri-1) { background-color: #97c3ff; color: #000; }
:root:not([data-accent]) ::highlight(iri-2) { background-color: #b18cff; color: #000; }
:root:not([data-accent]) ::highlight(iri-3) { background-color: #d893ea; color: #000; }
:root:not([data-accent]) ::highlight(iri-4) { background-color: #ff9ad5; color: #000; }
:root:not([data-accent]) ::highlight(iri-5) { background-color: #ffb4c6; color: #000; }
:root:not([data-accent]) ::highlight(iri-6) { background-color: #ffd2b6; color: #000; }
:root:not([data-accent]) ::highlight(iri-7) { background-color: #fff1a8; color: #000; }

:root:not([data-accent]) .sheen { background: var(--iri); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 22px rgba(177,140,255,.32)); }

/* Buttons: white pill with an iridescent glow, hairline pill. */
:root:not([data-accent]) .btn-solid { background: var(--white); color: #000; }
:root:not([data-accent]) .btn-solid:hover { background: var(--white); box-shadow: 0 0 0 1px #fff, -14px 6px 34px -12px rgba(124,247,255,.7), 14px 8px 34px -12px rgba(255,154,213,.65), 0 10px 44px -10px rgba(177,140,255,.75); }
:root:not([data-accent]) .btn-solid:active { background: var(--white); }
:root:not([data-accent]) .btn-line:hover { box-shadow: 0 0 24px -6px rgba(255,255,255,.18), 0 8px 30px -14px rgba(177,140,255,.5); }
:root:not([data-accent]) .link { border-bottom-color: var(--line-2); }
:root:not([data-accent]) .link:hover { color: var(--ink); border-color: var(--white); }

/* Pointer spotlight on pillars. */
:root:not([data-accent]) .pillar::after { background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(177,140,255,.10), rgba(124,247,255,.04) 35%, transparent 60%); }

/* Lit tags: an iridescent hairline, a soft aura, a slow shimmer. */
:root:not([data-accent]) .tag.lit, :root:not([data-accent]) .tag:has(> input:checked) { background: linear-gradient(180deg, rgba(30,30,34,.9), rgba(12,12,14,.9)); box-shadow: -12px 0 30px -10px rgba(124,247,255,.6), 12px 0 30px -10px rgba(255,154,213,.55), 0 8px 26px -10px rgba(177,140,255,.65); }
:root:not([data-accent]) .tag.lit::after, :root:not([data-accent]) .tag:has(> input:checked)::after { background: linear-gradient(100deg, #7cf7ff, #b18cff, #ff9ad5, #fff1a8, #7cf7ff) 0 0 / 200% 100%; }
:root:not([data-accent]) .tag.lit::before, :root:not([data-accent]) .tag:has(> input:checked)::before { background: var(--iri); box-shadow: 0 0 8px rgba(177,140,255,.9); }
:root:not([data-accent]) .tag.lit:hover { box-shadow: -12px 0 32px -10px rgba(124,247,255,.75), 12px 0 32px -10px rgba(255,154,213,.7), 0 8px 30px -10px rgba(177,140,255,.8); }

:root:not([data-accent]) .open-copy::before { background: radial-gradient(50% 60% at 50% 50%, rgba(177,140,255,.10), rgba(124,247,255,.04) 45%, transparent 75%); }
:root:not([data-accent]) .plan-main::before { background: conic-gradient(from var(--a, 0deg), #7cf7ff, #b18cff, #ff9ad5, #fff1a8, #2a2a2a 40%, #2a2a2a 85%, #7cf7ff); }
:root:not([data-accent]) .talk::before { background: radial-gradient(closest-side, rgba(177,140,255,.14), rgba(124,247,255,.05) 50%, transparent); }

/* Booking and contact states. */
:root:not([data-accent]) .avatar, :root:not([data-accent]) .book-top .avatar { background: var(--iri); color: #000; }
:root:not([data-accent]) .bk-day[aria-pressed="true"] { background: var(--white); border-color: var(--white); color: #000; box-shadow: -6px 2px 16px -6px rgba(124,247,255,.75), 6px 4px 16px -6px rgba(255,154,213,.65), 0 6px 18px -6px rgba(177,140,255,.8); }
:root:not([data-accent]) .bk-day[aria-pressed="true"] .bk-dow, :root:not([data-accent]) .bk-day[aria-pressed="true"] .bk-mon { color: #444; opacity: 1; }
:root:not([data-accent]) .bk-time:hover { box-shadow: 0 0 24px -6px rgba(255,255,255,.18), 0 8px 30px -14px rgba(177,140,255,.5); }
:root:not([data-accent]) .bk-change:hover, :root:not([data-accent]) .bk-alt a:hover { color: var(--white); border-color: var(--white); }
:root:not([data-accent]) .bk-field input:focus, :root:not([data-accent]) .bk-field textarea:focus { box-shadow: 0 0 0 3px rgba(177,140,255,.22); }
:root:not([data-accent]) .bk-err { color: #ff9ad5; }
:root:not([data-accent]) .bk-tick { background: var(--iri); color: #000; box-shadow: 0 0 30px -6px rgba(177,140,255,.7); }
:root:not([data-accent]) .tb-contact a:hover { color: var(--ink); border-color: var(--white); }
:root:not([data-accent]) .field input:focus, :root:not([data-accent]) .field textarea:focus { box-shadow: 0 0 0 1px var(--white), 0 0 28px -8px rgba(177,140,255,.6); }
:root:not([data-accent]) .form-status.ok { border-color: rgba(124,247,255,.4); box-shadow: 0 0 30px -12px rgba(124,247,255,.5); }
:root:not([data-accent]) .form-status a:hover { color: inherit; border-color: var(--white); }
:root:not([data-accent]) .prose blockquote { border-left: 1px solid; border-image: var(--iri) 1; }
:root:not([data-accent]) .panel { background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, -30%), rgba(177,140,255,.09), rgba(124,247,255,.03) 40%, transparent 65%); }
:root:not([data-accent]) .panel-glow { box-shadow: -26px 20px 80px -54px rgba(124,247,255,.32), 26px 30px 90px -54px rgba(177,140,255,.5), 0 0 60px -30px rgba(177,140,255,.22); }

/* Glow: iridescent light as punctuation. */
:root:not([data-accent]) .hero::before { background: radial-gradient(34% 26% at 30% 14%, rgba(124,247,255,.10), transparent 70%), radial-gradient(44% 30% at 62% 26%, rgba(177,140,255,.16), transparent 70%), radial-gradient(30% 22% at 76% 40%, rgba(255,154,213,.08), transparent 70%); }
@media (min-width: 900px) {
  :root:not([data-accent]) .hero::before { background: radial-gradient(26% 34% at 64% 30%, rgba(124,247,255,.09), transparent 70%), radial-gradient(30% 44% at 76% 50%, rgba(177,140,255,.15), transparent 70%), radial-gradient(22% 30% at 86% 66%, rgba(255,154,213,.08), transparent 70%), radial-gradient(30% 30% at 10% 40%, rgba(177,140,255,.035), transparent 70%); }
}
/* Section tops: an iridescent hairline with a faint violet bloom. */
:root:not([data-accent]) .section, :root:not([data-accent]) .open, :root:not([data-accent]) .foot { background-image: linear-gradient(90deg, transparent, rgba(124,247,255,.7) 25%, rgba(177,140,255,.95) 50%, rgba(255,154,213,.7) 75%, transparent), radial-gradient(50% 100% at 50% 0, rgba(177,140,255,.07), transparent 70%); }
/* Cards: an outer iridescent aura and spotlight. */
:root:not([data-accent]) .plan-main { box-shadow: -34px 16px 80px -54px rgba(124,247,255,.4), 34px 28px 80px -54px rgba(255,154,213,.34), 0 26px 100px -56px rgba(177,140,255,.55), 0 0 60px -30px rgba(177,140,255,.25); }
:root:not([data-accent]) .book { box-shadow: -26px 20px 80px -54px rgba(124,247,255,.32), 26px 30px 90px -54px rgba(177,140,255,.5), 0 0 60px -30px rgba(177,140,255,.22); }
:root:not([data-accent]) .plan, :root:not([data-accent]) .book { background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, -30%), rgba(177,140,255,.09), rgba(124,247,255,.03) 40%, transparent 65%); }
:root:not([data-accent]) .plan-main { background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, -30%), rgba(177,140,255,.12), rgba(124,247,255,.04) 40%, transparent 65%), linear-gradient(180deg, #121212, #0a0a0a); }