/* ─────────────────────────────────────────────────────────────────────────
   Focus ring tokens — mirrors "Focus rings" Figma effect styles
   All rings are built from two outer layers:
     1. 0 0 0 2px var(--bg-primary)   — white gap between element and ring
     2. 0 0 0 4px var(--focus-ring)   — the coloured ring itself
   Plus optional shadow and skeuomorphic layers.

   Ring colour variables (--focus-ring, --focus-ring-error) are defined in
   semantic.css and change per theme/mode.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Simple rings (no shadow) ──────────────────────────────────────────── */

  --ring:
    0 0 0 2px var(--bg-primary),
    0 0 0 4px var(--focus-ring);

  --ring-error:
    0 0 0 2px var(--bg-primary),
    0 0 0 4px var(--focus-ring-error);

  /* ── Rings with shadows ────────────────────────────────────────────────── */

  --ring-shadow-xs:
    0 0 0 2px var(--bg-primary),
    0 0 0 4px var(--focus-ring),
    0 1px 2px 0 var(--shadow-color-xs);

  --ring-shadow-sm:
    0 0 0 2px var(--bg-primary),
    0 0 0 4px var(--focus-ring),
    0 1px 2px 0 var(--shadow-color-sm-02),
    0 1px 3px 0 var(--shadow-color-sm-01);

  --ring-error-shadow-xs:
    0 0 0 2px var(--bg-primary),
    0 0 0 4px var(--focus-ring-error),
    0 1px 2px 0 var(--shadow-color-xs);

  /* ── Rings with shadows + skeuomorphic inset ───────────────────────────── */

  --ring-shadow-xs-skeuomorphic:
    0 0 0 2px var(--bg-primary),
    0 0 0 4px var(--focus-ring),
    0 1px 2px 0         var(--shadow-color-xs),
    inset 0 -2px 0 0px  var(--shadow-color-skeuomorphic-inset-01),
    inset 0  0px 0 1px  var(--shadow-color-skeuomorphic-inset-02);

  --ring-error-shadow-xs-skeuomorphic:
    0 0 0 2px var(--bg-primary),
    0 0 0 4px var(--focus-ring-error),
    0 1px 2px 0         var(--shadow-color-xs),
    inset 0 -2px 0 0px  var(--shadow-color-skeuomorphic-inset-01),
    inset 0  0px 0 1px  var(--shadow-color-skeuomorphic-inset-02);
}

/* ── Dark mode overrides ──────────────────────────────────────────────────
   Tailwind v4 / Lightning CSS resolves nested var() at build time in :root
   scope, locking --focus-ring to the light-mode value. Re-declaring every
   ring token inside the dark-mode selector ensures they pick up the correct
   dark-mode colour context at runtime.
   ───────────────────────────────────────────────────────────────────────── */

:root.dark,
[data-theme="default"].dark {
  /* ── Simple rings ──────────────────────────────────────────────────────── */

  --ring:
    0 0 0 2px var(--bg-primary),
    0 0 0 4px var(--focus-ring);

  --ring-error:
    0 0 0 2px var(--bg-primary),
    0 0 0 4px var(--focus-ring-error);

  /* ── Rings with shadows ────────────────────────────────────────────────── */

  --ring-shadow-xs:
    0 0 0 2px var(--bg-primary),
    0 0 0 4px var(--focus-ring),
    0 1px 2px 0 var(--shadow-color-xs);

  --ring-shadow-sm:
    0 0 0 2px var(--bg-primary),
    0 0 0 4px var(--focus-ring),
    0 1px 2px 0 var(--shadow-color-sm-02),
    0 1px 3px 0 var(--shadow-color-sm-01);

  --ring-error-shadow-xs:
    0 0 0 2px var(--bg-primary),
    0 0 0 4px var(--focus-ring-error),
    0 1px 2px 0 var(--shadow-color-xs);

  /* ── Rings with shadows + skeuomorphic inset ───────────────────────────── */

  --ring-shadow-xs-skeuomorphic:
    0 0 0 2px var(--bg-primary),
    0 0 0 4px var(--focus-ring),
    0 1px 2px 0         var(--shadow-color-xs),
    inset 0 -2px 0 0px  var(--shadow-color-skeuomorphic-inset-01),
    inset 0  0px 0 1px  var(--shadow-color-skeuomorphic-inset-02);

  --ring-error-shadow-xs-skeuomorphic:
    0 0 0 2px var(--bg-primary),
    0 0 0 4px var(--focus-ring-error),
    0 1px 2px 0         var(--shadow-color-xs),
    inset 0 -2px 0 0px  var(--shadow-color-skeuomorphic-inset-01),
    inset 0  0px 0 1px  var(--shadow-color-skeuomorphic-inset-02);
}