/* ============================================================================
   Roboco (agentoito.com) — light scheme
   ----------------------------------------------------------------------------
   The page is a Tailwind build whose palette assumes a dark ground: text is
   white or pale blue, surfaces are white at 3-10% alpha, and the accents are
   bright enough to read against #0b1020. None of that survives being flipped
   value-by-value, which is what the previous generated pass did — text-soft
   (a pale blue-grey) came out as saturated blue, so body copy read as one long
   hyperlink, and the white CTA pill stayed white on a near-white page.

   So each token is mapped by the ROLE it plays, not by its value:

     surface   ink / panel / white-alpha / black-alpha  -> light greys
     text      white -> near-black; soft -> neutral slate (deliberately not blue)
     accent    cyan / violet / gold / lime -> darkened to clear 4.5:1 as text,
               but left bright where they are a FILL carrying dark text
     inverted  bg-white is the primary CTA. On a light ground the strongest
               button is dark, so the fill flips and its text-ink flips with it.

   Everything here is scoped to prefers-color-scheme: light. Dark is untouched.
   ========================================================================= */

@media (prefers-color-scheme: light) {

  :root {
    --ao-base:   #f6f7fb;   /* page ground, ink's navy hue at the light end */
    --ao-card:   #ffffff;   /* raised panels */
    --ao-fg:     #0e1424;   /* headings — ink, kept as the darkest note */
    --ao-body:   #414a61;   /* body copy: neutral slate, no blue cast */
    --ao-tint:   14, 20, 36;    /* rgb of --ao-fg, for alpha surfaces */
    --ao-teal:   4, 105, 126;   /* electric / cyanx, darkened to clear AA on the palest chip */
    --ao-violet: 91, 52, 214;
    --ao-gold:   109, 82, 32;
    --ao-lime:   70, 102, 10;
  }

  /* ---- ground and panels ------------------------------------------------ */

  .bg-ink      { background-color: var(--ao-base) !important; }
  .bg-ink\/80  { background-color: rgba(246, 247, 251, 0.85) !important; }
  .bg-panel\/70{ background-color: rgba(255, 255, 255, 0.72) !important; }
  .bg-panel\/80{ background-color: rgba(255, 255, 255, 0.85) !important; }

  /* White-alpha surfaces are "slightly raised" on dark. On light the same
     intent is "slightly recessed", so they become low-alpha ink. */
  .bg-white\/\[0\.03\]      { background-color: rgba(var(--ao-tint), 0.035) !important; }
  .bg-white\/\[0\.04\]      { background-color: rgba(var(--ao-tint), 0.045) !important; }
  .bg-white\/\[0\.045\]     { background-color: rgba(var(--ao-tint), 0.05)  !important; }
  .bg-white\/\[0\.05\]      { background-color: rgba(var(--ao-tint), 0.055) !important; }
  .bg-white\/5             { background-color: rgba(var(--ao-tint), 0.05)  !important; }
  .bg-white\/10            { background-color: rgba(var(--ao-tint), 0.08)  !important; }
  .hover\:bg-white\/10:hover     { background-color: rgba(var(--ao-tint), 0.09) !important; }
  .hover\:bg-white\/\[0\.07\]:hover { background-color: rgba(var(--ao-tint), 0.075) !important; }

  /* Black-alpha surfaces are recessed wells (the device readout, code blocks).
     Keeping them dark would punch holes in a light page, so they become the
     same recess one shade deeper than the raised surfaces. */
  .bg-black\/25 { background-color: rgba(var(--ao-tint), 0.05) !important; }
  .bg-black\/30 { background-color: rgba(var(--ao-tint), 0.055) !important; }
  .bg-black\/35 { background-color: rgba(var(--ao-tint), 0.065) !important; }
  .bg-black\/60 { background-color: rgba(var(--ao-tint), 0.085) !important; }

  /* ---- hairlines -------------------------------------------------------- */

  .border-white\/10 { border-color: rgba(var(--ao-tint), 0.12) !important; }
  .border-white\/15 { border-color: rgba(var(--ao-tint), 0.16) !important; }
  .divide-white\/10 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgba(var(--ao-tint), 0.12) !important;
  }

  /* ---- text ------------------------------------------------------------- */

  body            { color: var(--ao-body) !important; }
  .text-white     { color: var(--ao-fg) !important; }
  .hover\:text-white:hover { color: var(--ao-fg) !important; }

  /* soft is the body ramp. It must stay neutral — a blue ramp here is what
     made every paragraph look like a link. */
  .text-soft      { color: var(--ao-body) !important; }
  .text-soft\/90  { color: rgba(var(--ao-tint), 0.92) !important; }
  .text-soft\/80  { color: rgba(var(--ao-tint), 0.86) !important; }
  .text-soft\/75  { color: rgba(var(--ao-tint), 0.82) !important; }
  .text-soft\/70  { color: rgba(var(--ao-tint), 0.78) !important; }
  .text-soft\/65  { color: rgba(var(--ao-tint), 0.74) !important; }
  .text-soft\/60  { color: rgba(var(--ao-tint), 0.70) !important; }
  .text-soft\/50  { color: rgba(var(--ao-tint), 0.68) !important; }
  .text-soft\/40  { color: rgba(var(--ao-tint), 0.64) !important; }

  .text-slate-200 { color: #3f4a5f !important; }
  .text-slate-300 { color: #47526a !important; }
  .text-slate-400 { color: #55607a !important; }

  /* Accents as TEXT: darkened until each clears 4.5:1 on --ao-base. */
  .text-electric  { color: rgb(var(--ao-teal))   !important; }
  .text-cyanx     { color: rgb(var(--ao-teal))   !important; }
  .text-violet    { color: rgb(var(--ao-violet)) !important; }
  .text-gold      { color: rgb(var(--ao-gold))   !important; }
  .text-lime      { color: rgb(var(--ao-lime))   !important; }

  /* ---- the inverted CTA -------------------------------------------------- */
  /* bg-white is the primary pill. White-on-white is not a button, so the fill
     goes dark — and because its label is text-ink, the label has to come with
     it. Scoped to the pair so text-ink keeps meaning "dark" on the bright
     electric/violet/cyanx fills, where it is already correct. */

  .bg-white              { background-color: var(--ao-fg) !important; }
  .bg-white.text-ink     { color: #ffffff !important; }
  .bg-white.hover\:bg-champagne:hover,
  .bg-white.hover\:bg-electric:hover { background-color: #253150 !important; }

  /* ---- accent fills and washes ------------------------------------------ */
  /* These carry dark text, so they stay bright — only the low-alpha washes
     move, since a 10% pale cyan is invisible on white. */

  .bg-electric\/10 { background-color: rgba(var(--ao-teal), 0.10) !important; }
  .bg-electric\/15 { background-color: rgba(var(--ao-teal), 0.14) !important; }
  .bg-cyanx\/10    { background-color: rgba(var(--ao-teal), 0.10) !important; }
  .bg-cyanx\/15    { background-color: rgba(var(--ao-teal), 0.14) !important; }
  .hover\:bg-cyanx\/10:hover { background-color: rgba(var(--ao-teal), 0.12) !important; }

  .bg-violet\/10   { background-color: rgba(var(--ao-violet), 0.09) !important; }
  .bg-violet\/15   { background-color: rgba(var(--ao-violet), 0.12) !important; }
  .hover\:bg-violet\/25:hover { background-color: rgba(var(--ao-violet), 0.18) !important; }

  .bg-gold\/\[0\.05\] { background-color: rgba(var(--ao-gold), 0.06) !important; }
  .bg-gold\/\[0\.06\] { background-color: rgba(var(--ao-gold), 0.07) !important; }
  .bg-gold\/10        { background-color: rgba(var(--ao-gold), 0.10) !important; }
  .bg-gold\/15        { background-color: rgba(var(--ao-gold), 0.13) !important; }
  .bg-lime\/15        { background-color: rgba(var(--ao-lime), 0.13) !important; }

  /* ---- accent borders and rings ----------------------------------------- */

  .border-electric\/20 { border-color: rgba(var(--ao-teal), 0.28) !important; }
  .border-electric\/30 { border-color: rgba(var(--ao-teal), 0.38) !important; }
  .border-cyanx\/20    { border-color: rgba(var(--ao-teal), 0.28) !important; }
  .border-cyanx\/30    { border-color: rgba(var(--ao-teal), 0.36) !important; }
  .border-cyanx\/40    { border-color: rgba(var(--ao-teal), 0.44) !important; }
  .border-violet\/30   { border-color: rgba(var(--ao-violet), 0.32) !important; }
  .border-violet\/50   { border-color: rgba(var(--ao-violet), 0.45) !important; }
  .border-gold\/15     { border-color: rgba(var(--ao-gold), 0.20) !important; }
  .border-gold\/20     { border-color: rgba(var(--ao-gold), 0.26) !important; }
  .border-gold\/30     { border-color: rgba(var(--ao-gold), 0.34) !important; }
  .border-gold\/40     { border-color: rgba(var(--ao-gold), 0.44) !important; }

  .hover\:border-cyanx\/40:hover    { border-color: rgba(var(--ao-teal), 0.46) !important; }
  .hover\:border-electric\/40:hover { border-color: rgba(var(--ao-teal), 0.46) !important; }
  .hover\:border-gold\/30:hover     { border-color: rgba(var(--ao-gold), 0.36) !important; }
  .focus\:border-electric\/60:focus { border-color: rgba(var(--ao-teal), 0.62) !important; }
  .focus\:border-violet\/60:focus   { border-color: rgba(var(--ao-violet), 0.62) !important; }

  .ring-electric\/40 { --tw-ring-color: rgba(var(--ao-teal), 0.42) !important; }
  .ring-gold\/40     { --tw-ring-color: rgba(var(--ao-gold), 0.42) !important; }

  /* ---- form fields ------------------------------------------------------ */

  input::placeholder,
  textarea::placeholder { color: #67718a !important; }

  /* ---- ground wash ------------------------------------------------------ */
  /* Same two accent washes as the dark build, thinned so they tint the page
     rather than colour it. */

  body {
    background-image:
      radial-gradient(circle at top left,  rgba(var(--ao-teal), 0.10), transparent 30rem),
      radial-gradient(circle at 80% 10%,   rgba(var(--ao-violet), 0.09), transparent 26rem),
      linear-gradient(135deg, #f8f9fc, var(--ao-base) 48%, #f7f8fb) !important;
  }
}

/* ---- dark: the one de-emphasised label that failed AA ------------------- */
/* Two de-emphasised steps measured under 4.5:1 in dark — "(optional)" beside a
   field label at 3.5:1, and the footer line at 4.3:1. The ramp keeps its shape;
   these two steps just clear the bar. The rest of the dark scheme is untouched. */

@media (prefers-color-scheme: dark) {
  .text-soft\/40 { color: rgba(215, 224, 255, 0.62) !important; }
  .text-soft\/50 { color: rgba(215, 224, 255, 0.68) !important; }
}

/* The page paints its ground on a wrapper, so body is given the same colour:
   it keeps the scheme legible to tooling and stops a flash of the wrong shade. */
body { background-color: #0c1020; }
@media (prefers-color-scheme: light) { body { background-color: #f6f7fb !important; } }