/* Radio — LittleLives design system
   Tokens follow /tokens/semantics.web.json and the Figma source
   (Figma node 146:6). In sv-frontend, replace custom props with Tailwind
   classes (text-content/*, border-stroke/*).
*/

:root {
  /* Primitives (subset) */
  --color-white:        #ffffff;
  --color-neutral-50:   #f0f0f0;
  --color-neutral-300:  #bbbbbb;       /* content/disabled */
  --color-neutral-800:  #545454;       /* content/neutral-secondary */
  --color-neutral-950:  #333333;       /* content/neutral-primary */
  --color-brand-500:    #00b8ec;
  --color-brand-800:    #005b82;

  /* Semantics — mirror of /tokens/semantics.web.json */
  --surface-default-white:         var(--color-white);
  --surface-default-disabled:      var(--color-neutral-50);

  --content-white:                 var(--color-white);
  --content-neutral-primary:       var(--color-neutral-950);
  --content-neutral-secondary:     var(--color-neutral-800);
  --content-brand-strong:          var(--color-brand-800);
  --content-disabled:              var(--color-neutral-300);

  --stroke-brand:                  var(--color-brand-500);
  --stroke-brand-strong:           var(--color-brand-800);
}

/* ---------- Wrapper (label) ---------- */
.ll-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Nunito Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--content-neutral-primary);
  cursor: pointer;
  user-select: none;
}

.ll-radio[data-disabled="true"] {
  cursor: not-allowed;
  color: var(--content-disabled);
}

/* ---------- Native input visually hidden ---------- */
.ll-radio__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}

/* ---------- Visual circle ---------- */
.ll-radio__box {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;             /* Figma corner-1000 (full round) */
  background: var(--surface-default-white);
  /* Default border: content/neutral-secondary 1.5px (Figma off default) */
  box-shadow: inset 0 0 0 1.5px var(--content-neutral-secondary);
  transition: background 120ms ease, box-shadow 120ms ease;
}

/* Hover (unselected): border switches to brand-strong */
.ll-radio:hover .ll-radio__input:not(:checked):not(:disabled) + .ll-radio__box {
  box-shadow: inset 0 0 0 1.5px var(--content-brand-strong);
}

/* Focus (unselected): default border + 3px outer ring stroke/brand */
.ll-radio__input:focus-visible:not(:checked) + .ll-radio__box {
  box-shadow: inset 0 0 0 1.5px var(--content-neutral-secondary),
              0 0 0 3px var(--stroke-brand);
}

/* ---------- Selected ---------- */
.ll-radio__input:checked + .ll-radio__box {
  background: var(--surface-default-white);
  box-shadow: inset 0 0 0 1.5px var(--content-brand-strong);
}

/* Hover on selected: thicker 2px brand-strong ring (Figma hover) */
.ll-radio:hover .ll-radio__input:checked:not(:disabled) + .ll-radio__box {
  box-shadow: inset 0 0 0 2px var(--content-brand-strong);
}

/* Focus on selected: brand-strong ring + 3px outer stroke/brand ring */
.ll-radio__input:checked:focus-visible + .ll-radio__box {
  box-shadow: inset 0 0 0 1.5px var(--content-brand-strong),
              0 0 0 3px var(--stroke-brand);
}

/* Inner dot — visible only when checked */
.ll-radio__box::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--content-brand-strong);
  opacity: 0;
  transition: opacity 80ms ease, background 120ms ease;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ll-radio__input:checked + .ll-radio__box::after {
  opacity: 1;
}

/* ---------- Disabled ---------- */
.ll-radio__input:disabled + .ll-radio__box {
  box-shadow: inset 0 0 0 1.5px var(--content-disabled);
  background: var(--surface-default-disabled);
  cursor: not-allowed;
}

/* Disabled selected: white bg + content/disabled ring + content/disabled dot */
.ll-radio__input:disabled:checked + .ll-radio__box {
  background: var(--surface-default-white);
  box-shadow: inset 0 0 0 1.5px var(--content-disabled);
}

.ll-radio__input:disabled:checked + .ll-radio__box::after {
  background: var(--content-disabled);
}

/* Disabled hover suppressed */
.ll-radio[data-disabled="true"]:hover .ll-radio__box {
  box-shadow: inset 0 0 0 1.5px var(--content-disabled);
  background: var(--surface-default-disabled);
}

.ll-radio[data-disabled="true"]:hover .ll-radio__input:checked + .ll-radio__box {
  background: var(--surface-default-white);
  box-shadow: inset 0 0 0 1.5px var(--content-disabled);
}

/* ---------- Label text ---------- */
.ll-radio__label:empty { display: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ll-radio__box,
  .ll-radio__box::after { transition: none !important; }
}