/* ============================================================
   NUKON USA — RADII & BORDERS
   Pills for actions, soft rectangles for containers, thin hairlines.
   ============================================================ */
:root {
  /* LOCKED */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* DERIVED */
  --radius-xs: 4px;
  --radius-xl: 32px;

  /* --- ENGINEERED CORNER SYSTEM (client decision, 2026-08) ---
     Measured radii echo precision-cut metal and sit better with Saira.
     The pill survives ONLY on micro elements: chips, tags, eyebrow labels,
     and the circular icon button. */
  --radius-action:    12px; /* standard buttons */
  --radius-action-lg: 14px; /* large hero CTAs */
  --radius-input:     12px; /* inputs, selects, textareas */
  /* cards stay at --radius-lg (22px) */

  /* Progressive enhancement: continuous (squircle) curvature where the UA
     supports it. Falls back to plain border-radius everywhere else. */
  --corner-shape: squircle;

  /* borders */
  --border-hairline: 1px solid var(--nukon-line); /* @kind other */
  --border-strong:   1.5px solid var(--nukon-line); /* LOCKED weight — from .btn-ghost. @kind other */
  --border-input:    1px solid var(--nukon-line-strong); /* @kind other */
  --border-inverse:  1px solid var(--nukon-panel-line); /* @kind other */
  --border-accent:   1.5px solid var(--nukon-orange); /* @kind other */

  /* the LED / laser hairline motif */
  --led-thickness: 2px; /* @kind spacing */
  --led-dash-width: 28px; /* the eyebrow dash. @kind spacing */
  --eyebrow-gap: 12px; /* dash to label. @kind spacing */
}

/* Squircle corners where supported. Progressive enhancement only — every element
   already carries a plain border-radius, so unsupporting browsers are unchanged.
   Opt IN via .nk-corner; the pill and circular elements must stay round. */
@supports (corner-shape: squircle) {
  .nk-corner { corner-shape: var(--corner-shape); }
  /* pills and circles are never squircled — a squircled 999px radius reads as a blob */
  .nk-pill, .nk-corner[data-pill] { corner-shape: round; }
}