/**
 * ry-ui Theme CSS
 *
 * All visual styling: colors, shadows, borders, typography.
 * Requires ry-structure.css for layout.
 * Override these styles or swap with your own theme.
 */

@layer ry-theme {

/* ═══════════════════════════════════════════════════════════════
   BASE / BODY
   ═══════════════════════════════════════════════════════════════ */

html {
  background-color: var(--ry-color-bg);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION — INVERTED
   ═══════════════════════════════════════════════════════════════ */

ry-section[inverted] {
  background-color: var(--ry-color-text);
  color: var(--ry-color-bg);
  border-radius: var(--ry-radius-lg);
}

ry-section[inverted] :is(h1, h2, h3, h4, p, span, a) {
  color: inherit;
}

ry-section[inverted] p {
  opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER — INVERTED
   ═══════════════════════════════════════════════════════════════ */

ry-footer[inverted] {
  background-color: var(--ry-color-text);
  color: var(--ry-color-bg);
}

ry-footer[inverted] :is(a, strong, p, span, nav) {
  color: inherit;
}

ry-footer[inverted] a {
  opacity: 0.7;
  transition: opacity var(--ry-duration-fast);
}

ry-footer[inverted] a:hover {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   FOCUS STYLES
   ═══════════════════════════════════════════════════════════════ */

:is([class^="ry-"], [class*=" ry-"], ry-button, .ry-btn, .ry-input):focus-visible {
  outline: none;
  box-shadow: var(--ry-focus-ring);
}

/* ═══════════════════════════════════════════════════════════════
   PAGE TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════ */

ry-page {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-text-base);
  line-height: var(--ry-leading-normal);
  color: var(--ry-color-text);
  background-color: var(--ry-color-bg);
}

ry-page :is(h1, h2, h3, h4, h5, h6) {
  margin: 0 0 var(--ry-space-4) 0;
  font-weight: var(--ry-font-semibold);
  line-height: var(--ry-leading-tight);
  color: var(--ry-color-text);
}

ry-page h1 { font-size: var(--ry-text-4xl); }
ry-page h2 { font-size: var(--ry-text-3xl); }
ry-page h3 { font-size: var(--ry-text-2xl); }
ry-page h4 { font-size: var(--ry-text-xl); }

ry-page p {
  margin: 0 0 var(--ry-space-4) 0;
}

ry-page a {
  color: var(--ry-color-primary);
  text-decoration: none;
}

ry-page a:hover {
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════ */

ry-header {
  background-color: var(--ry-color-bg);
  border-block-end: var(--ry-border-width) solid var(--ry-color-border);
}

ry-header strong {
  font-size: var(--ry-text-xl);
}

ry-header span {
  color: var(--ry-color-text-muted);
}

ry-header a:not(.ry-btn) {
  color: var(--ry-color-text-muted);
  text-decoration: none;
  font-size: var(--ry-text-sm);
  transition: color var(--ry-duration-fast);
}

ry-header a:not(.ry-btn):hover {
  color: var(--ry-color-text);
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */

ry-footer {
  background-color: var(--ry-color-bg-subtle);
  border-block-start: var(--ry-border-width) solid var(--ry-color-border);
  color: var(--ry-color-text-muted);
}

ry-footer a {
  color: inherit;
  text-decoration: none;
  transition: color var(--ry-duration-fast);
}

ry-footer a:hover {
  color: var(--ry-color-text);
}

/* ═══════════════════════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════════════════════ */

ry-nav a {
  color: var(--ry-color-text-muted);
  font-size: var(--ry-text-sm);
  font-weight: var(--ry-font-medium);
  border-radius: var(--ry-radius-md);
  transition: color var(--ry-duration-fast) var(--ry-ease),
              background-color var(--ry-duration-fast) var(--ry-ease);
}

ry-nav a:hover {
  color: var(--ry-color-text);
  background-color: var(--ry-color-hover-overlay);
}

ry-nav a[aria-current="page"] {
  color: var(--ry-color-primary);
}

/* ═══════════════════════════════════════════════════════════════
   LOGO
   ═══════════════════════════════════════════════════════════════ */

ry-logo {
  font-size: var(--ry-text-xl);
  font-weight: var(--ry-font-bold);
  color: var(--ry-color-text);
}

/* ═══════════════════════════════════════════════════════════════
   DIVIDER
   ═══════════════════════════════════════════════════════════════ */

ry-divider {
  background-color: var(--ry-color-border);
}

/* ═══════════════════════════════════════════════════════════════
   SPLIT HANDLE
   ═══════════════════════════════════════════════════════════════ */

ry-split [data-ry-target="handle"]::after {
  background-color: var(--ry-color-border-strong);
}

ry-split[data-ry-resizing] [data-ry-target="handle"]::after {
  background-color: var(--ry-color-primary);
}

ry-split [data-ry-target="handle"]:focus-visible {
  outline: none;
}

ry-split [data-ry-target="handle"]:focus-visible::after {
  opacity: 1;
  background-color: var(--ry-color-primary);
  box-shadow: var(--ry-focus-ring);
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */

:is(:where(.ry-btn), ry-button) {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-text-sm);
  font-weight: var(--ry-font-medium);
  line-height: var(--ry-leading-normal);
  text-decoration: none;

  background-color: var(--ry-color-primary);
  color: var(--ry-color-text-inverse);
  border: var(--ry-border-width) solid transparent;
  border-radius: var(--ry-radius-md);

  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: var(--ry-duration-fast);
  transition-timing-function: var(--ry-ease);
}

:is(:where(.ry-btn), ry-button):hover {
  background-color: var(--ry-color-primary-hover);
}

:is(:where(.ry-btn), ry-button):active {
  background-color: var(--ry-color-primary-active);
}

:is(:where(.ry-btn:disabled, .ry-btn[aria-disabled="true"]), ry-button[disabled]) {
  opacity: 0.5;
}

/* Button variants */
:is(:where(.ry-btn--secondary), ry-button[variant="secondary"]) {
  background-color: var(--ry-color-secondary);
}
:is(:where(.ry-btn--secondary), ry-button[variant="secondary"]):hover {
  background-color: var(--ry-color-secondary-hover);
}

:is(:where(.ry-btn--outline), ry-button[variant="outline"]) {
  background-color: transparent;
  color: var(--ry-color-primary);
  border-color: var(--ry-color-primary);
}
:is(:where(.ry-btn--outline), ry-button[variant="outline"]):hover {
  background-color: var(--ry-color-primary);
  color: var(--ry-color-text-inverse);
}

:is(:where(.ry-btn--ghost), ry-button[variant="ghost"]) {
  background-color: transparent;
  color: var(--ry-color-text);
}
:is(:where(.ry-btn--ghost), ry-button[variant="ghost"]):hover {
  background-color: var(--ry-color-bg-muted);
}

:is(:where(.ry-btn--danger), ry-button[variant="danger"]) {
  background-color: var(--ry-color-danger);
}
:is(:where(.ry-btn--danger), ry-button[variant="danger"]):hover {
  background-color: var(--ry-color-danger-hover);
}

:is(:where(.ry-btn--accent), ry-button[variant="accent"]) {
  background-color: var(--ry-color-accent);
}
:is(:where(.ry-btn--accent), ry-button[variant="accent"]):hover {
  background-color: var(--ry-color-accent-hover);
}

/* Link variant — inline text link */
:is(:where(.ry-btn--link), ry-button[variant="link"]) {
  background: none;
  color: var(--ry-color-primary);
  font-weight: var(--ry-font-semibold);
  text-decoration: none;
  border: none;
}
:is(:where(.ry-btn--link), ry-button[variant="link"]):hover {
  text-decoration: underline;
}

/* Pressed/active toggle state */
:is(:where(.ry-btn[aria-pressed="true"]), ry-button[pressed]) {
  background-color: var(--ry-color-primary);
  color: var(--ry-color-text-inverse);
  border-color: var(--ry-color-primary);
}
:is(:where(.ry-btn[aria-pressed="true"]), ry-button[pressed]):hover {
  background-color: var(--ry-color-primary-hover);
  border-color: var(--ry-color-primary-hover);
}


/* Button sizes (typography only - padding is structural) */
:is(:where(.ry-btn--sm), ry-button[size="sm"]) {
  font-size: var(--ry-text-xs);
}

:is(:where(.ry-btn--lg), ry-button[size="lg"]) {
  font-size: var(--ry-text-base);
}

/* ═══════════════════════════════════════════════════════════════
   TOGGLE BUTTON
   ═══════════════════════════════════════════════════════════════ */

ry-toggle-button {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-text-sm);
  font-weight: var(--ry-font-medium);
  line-height: var(--ry-leading-normal);
  text-decoration: none;

  background-color: var(--ry-color-bg);
  color: var(--ry-color-text);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-md);

  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: var(--ry-duration-fast);
  transition-timing-function: var(--ry-ease);
}

ry-toggle-button:hover {
  background-color: var(--ry-color-bg-muted);
  border-color: var(--ry-color-border-strong);
}

ry-toggle-button:active {
  background-color: var(--ry-color-bg-subtle);
}

ry-toggle-button[pressed] {
  background-color: var(--ry-color-primary);
  border-color: var(--ry-color-primary);
  color: var(--ry-color-text-inverse);
}

ry-toggle-button[pressed]:hover {
  background-color: var(--ry-color-primary-hover);
  border-color: var(--ry-color-primary-hover);
}

ry-toggle-button[disabled] {
  opacity: 0.5;
}

ry-toggle-button:focus-visible {
  outline: none;
  box-shadow: var(--ry-focus-ring);
}

/* Size variants (typography only) */
ry-toggle-button[size="sm"] {
  font-size: var(--ry-text-xs);
}

ry-toggle-button[size="lg"] {
  font-size: var(--ry-text-base);
}

/* ═══════════════════════════════════════════════════════════════
   SLIDER
   ═══════════════════════════════════════════════════════════════ */

ry-slider [data-ry-target="track"] {
  background-color: var(--ry-color-bg-muted);
  border-radius: var(--ry-radius-full);
}

ry-slider [data-ry-target="fill"] {
  background-color: var(--ry-color-primary);
  border-radius: var(--ry-radius-full);
}

ry-slider [data-ry-target^="thumb"] {
  background-color: var(--ry-color-bg);
  border: 2px solid var(--ry-color-primary);
  border-radius: var(--ry-radius-full);
  box-shadow: var(--ry-shadow-sm);
  transition: box-shadow var(--ry-duration-fast) var(--ry-ease);
}

ry-slider [data-ry-target^="thumb"]:hover {
  box-shadow: var(--ry-shadow-md);
}

ry-slider [data-ry-target^="thumb"]:focus-visible {
  outline: none;
  box-shadow: var(--ry-focus-ring);
}

ry-slider[disabled] {
  opacity: 0.5;
}

ry-slider [data-ry-target="labels"] {
  font-size: var(--ry-text-xs);
  color: var(--ry-color-text-muted);
}

ry-slider [data-ry-target^="tooltip"] {
  background-color: var(--ry-color-text);
  color: var(--ry-color-text-inverse);
  padding: var(--ry-space-1) var(--ry-space-2);
  border-radius: var(--ry-radius-md);
  font-size: var(--ry-text-xs);
  font-weight: var(--ry-font-medium);
}

/* Color variants */
ry-slider[color="secondary"] [data-ry-target="fill"] { background-color: var(--ry-color-secondary); }
ry-slider[color="secondary"] [data-ry-target^="thumb"] { border-color: var(--ry-color-secondary); }

ry-slider[color="success"] [data-ry-target="fill"] { background-color: var(--ry-color-success); }
ry-slider[color="success"] [data-ry-target^="thumb"] { border-color: var(--ry-color-success); }

ry-slider[color="warning"] [data-ry-target="fill"] { background-color: var(--ry-color-warning); }
ry-slider[color="warning"] [data-ry-target^="thumb"] { border-color: var(--ry-color-warning); }

ry-slider[color="danger"] [data-ry-target="fill"] { background-color: var(--ry-color-danger); }
ry-slider[color="danger"] [data-ry-target^="thumb"] { border-color: var(--ry-color-danger); }

ry-slider[color="info"] [data-ry-target="fill"] { background-color: var(--ry-color-info); }
ry-slider[color="info"] [data-ry-target^="thumb"] { border-color: var(--ry-color-info); }

/* ═══════════════════════════════════════════════════════════════
   KNOB
   ═══════════════════════════════════════════════════════════════ */

ry-knob [data-ry-target="ring"] {
  background: conic-gradient(
    from 225deg,
    var(--ry-color-primary) calc(var(--knob-percent) * 270deg),
    var(--ry-color-bg-muted) calc(var(--knob-percent) * 270deg)
  );
  border-radius: var(--ry-radius-full);
}

ry-knob [data-ry-target="cap"] {
  background: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-full);
  margin: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
}

ry-knob [data-ry-target="indicator"] {
  background-color: var(--ry-color-primary);
  border-radius: 1.5px;
}

ry-knob [data-ry-target="display"] {
  font-family: var(--ry-font-mono);
  font-size: var(--ry-text-sm);
  font-weight: var(--ry-font-medium);
  color: var(--ry-color-text);
}

ry-knob [data-ry-target="label"] {
  font-size: var(--ry-text-xs);
  color: var(--ry-color-text-muted);
}

ry-knob:focus-visible [data-ry-target="ring"] {
  box-shadow: var(--ry-focus-ring);
}

ry-knob[disabled] {
  opacity: 0.5;
}

/* Color variants */
ry-knob[color="secondary"] [data-ry-target="ring"] {
  background: conic-gradient(
    from 225deg,
    var(--ry-color-secondary) calc(var(--knob-percent) * 270deg),
    var(--ry-color-bg-muted) calc(var(--knob-percent) * 270deg)
  );
}
ry-knob[color="secondary"] [data-ry-target="indicator"] { background-color: var(--ry-color-secondary); }

ry-knob[color="success"] [data-ry-target="ring"] {
  background: conic-gradient(
    from 225deg,
    var(--ry-color-success) calc(var(--knob-percent) * 270deg),
    var(--ry-color-bg-muted) calc(var(--knob-percent) * 270deg)
  );
}
ry-knob[color="success"] [data-ry-target="indicator"] { background-color: var(--ry-color-success); }

ry-knob[color="warning"] [data-ry-target="ring"] {
  background: conic-gradient(
    from 225deg,
    var(--ry-color-warning) calc(var(--knob-percent) * 270deg),
    var(--ry-color-bg-muted) calc(var(--knob-percent) * 270deg)
  );
}
ry-knob[color="warning"] [data-ry-target="indicator"] { background-color: var(--ry-color-warning); }

ry-knob[color="danger"] [data-ry-target="ring"] {
  background: conic-gradient(
    from 225deg,
    var(--ry-color-danger) calc(var(--knob-percent) * 270deg),
    var(--ry-color-bg-muted) calc(var(--knob-percent) * 270deg)
  );
}
ry-knob[color="danger"] [data-ry-target="indicator"] { background-color: var(--ry-color-danger); }

/* ═══════════════════════════════════════════════════════════════
   NUMBER SELECT
   ═══════════════════════════════════════════════════════════════ */

.ry-number-select__btn {
  background: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  color: var(--ry-color-text);
  transition: background-color var(--ry-duration-fast) var(--ry-ease),
              border-color var(--ry-duration-fast) var(--ry-ease);
}

.ry-number-select__btn:hover {
  background-color: var(--ry-color-bg-muted);
  border-color: var(--ry-color-border-strong);
}

.ry-number-select__btn:active {
  background-color: var(--ry-color-bg-subtle);
}

.ry-number-select__decrement {
  border-start-start-radius: var(--ry-radius-md);
  border-end-start-radius: var(--ry-radius-md);
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  border-inline-end: none;
}

.ry-number-select__increment {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: var(--ry-radius-md);
  border-end-end-radius: var(--ry-radius-md);
  border-inline-start: none;
}

/* Single-button rounding */
ry-number-select[arrows="start"] .ry-number-select__decrement {
  border-radius: var(--ry-radius-md);
  border-inline-end: var(--ry-border-width) solid var(--ry-color-border);
}

ry-number-select[arrows="end"] .ry-number-select__increment {
  border-radius: var(--ry-radius-md);
  border-inline-start: var(--ry-border-width) solid var(--ry-color-border);
}

.ry-number-select__display {
  background-color: var(--ry-color-bg);
  border-block-start: var(--ry-border-width) solid var(--ry-color-border);
  border-block-end: var(--ry-border-width) solid var(--ry-color-border);
}

/* Display borders when both arrows */
ry-number-select:not([arrows]) .ry-number-select__display,
ry-number-select[arrows="both"] .ry-number-select__display {
  border-inline-start: none;
  border-inline-end: none;
}

/* No arrows: full border + radius */
ry-number-select[arrows="none"] .ry-number-select__display {
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-md);
}

/* Start only: display gets end border + end radius */
ry-number-select[arrows="start"] .ry-number-select__display {
  border-inline-end: var(--ry-border-width) solid var(--ry-color-border);
  border-inline-start: none;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: var(--ry-radius-md);
  border-end-end-radius: var(--ry-radius-md);
}

/* End only: display gets start border + start radius */
ry-number-select[arrows="end"] .ry-number-select__display {
  border-inline-start: var(--ry-border-width) solid var(--ry-color-border);
  border-inline-end: none;
  border-start-start-radius: var(--ry-radius-md);
  border-end-start-radius: var(--ry-radius-md);
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

/* Stacked: top-rounded increment, bottom-rounded decrement, no radius on display */
ry-number-select[arrows="stacked"] .ry-number-select__increment {
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-block-end: none;
  border-radius: var(--ry-radius-md) var(--ry-radius-md) 0 0;
}

ry-number-select[arrows="stacked"] .ry-number-select__decrement {
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-block-start: none;
  border-radius: 0 0 var(--ry-radius-md) var(--ry-radius-md);
}

ry-number-select[arrows="stacked"] .ry-number-select__display {
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-block-start: none;
  border-block-end: none;
  border-radius: 0;
}

/* Stacked-end: display start-rounded, buttons end-rounded */
ry-number-select[arrows="stacked-end"] .ry-number-select__display {
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-inline-end: none;
  border-start-start-radius: var(--ry-radius-md);
  border-end-start-radius: var(--ry-radius-md);
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

ry-number-select[arrows="stacked-end"] .ry-number-select__increment {
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-block-end: none;
  border-start-end-radius: var(--ry-radius-md);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

ry-number-select[arrows="stacked-end"] .ry-number-select__decrement {
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-end-end-radius: var(--ry-radius-md);
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  border-end-start-radius: 0;
}

/* Stacked-start: buttons start-rounded, display end-rounded */
ry-number-select[arrows="stacked-start"] .ry-number-select__display {
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-inline-start: none;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: var(--ry-radius-md);
  border-end-end-radius: var(--ry-radius-md);
}

ry-number-select[arrows="stacked-start"] .ry-number-select__increment {
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-block-end: none;
  border-start-start-radius: var(--ry-radius-md);
  border-start-end-radius: 0;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

ry-number-select[arrows="stacked-start"] .ry-number-select__decrement {
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-end-start-radius: var(--ry-radius-md);
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.ry-number-select__value {
  font-family: var(--ry-font-mono);
  font-size: var(--ry-text-sm);
  font-weight: var(--ry-font-medium);
  color: var(--ry-color-text);
}

.ry-number-select__input {
  font-family: var(--ry-font-mono);
  font-size: var(--ry-text-sm);
  font-weight: var(--ry-font-medium);
  color: var(--ry-color-text);
  background: transparent;
  border: none;
  border-block-end: 2px solid var(--ry-color-primary);
}

.ry-number-select__display:focus-visible {
  outline: none;
  box-shadow: var(--ry-focus-ring);
  border-color: var(--ry-color-primary);
}

.ry-number-select__affix {
  font-family: var(--ry-font-mono);
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text-muted);
}

.ry-number-select__label {
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text-muted);
}

ry-number-select[disabled] {
  opacity: 0.5;
}

ry-number-select[size="xs"] .ry-number-select__value {
  font-size: var(--ry-text-xs);
}

ry-number-select[size="xs"] .ry-number-select__affix {
  font-size: var(--ry-text-xs);
}

/* ═══════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════ */

ry-card {
  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-lg);
  box-shadow: var(--ry-shadow-sm);
}

:is(a, [interactive]):is(ry-card) {
  transition: border-color var(--ry-duration-normal) var(--ry-ease),
              box-shadow var(--ry-duration-normal) var(--ry-ease);
}

:is(a, [interactive]):is(ry-card):hover {
  border-color: var(--ry-color-primary);
  box-shadow: var(--ry-shadow-md);
}

ry-card h3 {
  font-size: var(--ry-text-lg);
  font-weight: var(--ry-font-semibold);
}

ry-card p {
  color: var(--ry-color-text-muted);
}

ry-card > img:first-child {
  border-radius: var(--ry-radius-md);
}

/* ═══════════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════════ */

:is(.ry-badge, ry-badge) {
  font-size: var(--ry-text-xs);
  font-weight: var(--ry-font-medium);
  background-color: var(--ry-color-bg-muted);
  color: var(--ry-color-text);
  border-radius: var(--ry-radius-full);
}

:is(.ry-badge--primary, ry-badge[variant="primary"]) {
  background-color: var(--ry-color-primary);
  color: var(--ry-color-text-inverse);
}

:is(.ry-badge--success, ry-badge[variant="success"]) {
  background-color: var(--ry-color-success);
  color: var(--ry-color-text-inverse);
}

:is(.ry-badge--warning, ry-badge[variant="warning"]) {
  background-color: var(--ry-color-warning);
  color: var(--ry-color-text);
}

:is(.ry-badge--danger, ry-badge[variant="danger"]) {
  background-color: var(--ry-color-danger);
  color: var(--ry-color-text-inverse);
}

:is(.ry-badge--accent, ry-badge[variant="accent"]) {
  background-color: var(--ry-color-accent);
  color: var(--ry-color-text-inverse);
}

/* Arbitrary color via style="--ry-badge-color: ..." */
ry-badge[style*="--ry-badge-color"] {
  background-color: var(--ry-badge-color);
  color: var(--ry-badge-text, var(--ry-color-text-inverse));
}

/* ═══════════════════════════════════════════════════════════════
   ALERTS
   ═══════════════════════════════════════════════════════════════ */

:is(.ry-alert, ry-alert) {
  background-color: var(--ry-color-bg-subtle);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-lg);
}

:is(.ry-alert--info, ry-alert[type="info"]) {
  background-color: var(--ry-color-info-bg);
  border-color: var(--ry-color-info);
  color: var(--ry-color-info-text);
}

:is(.ry-alert--success, ry-alert[type="success"]) {
  background-color: var(--ry-color-success-bg);
  border-color: var(--ry-color-success);
  color: var(--ry-color-success-text);
}

:is(.ry-alert--warning, ry-alert[type="warning"]) {
  background-color: var(--ry-color-warning-bg);
  border-color: var(--ry-color-warning);
  color: var(--ry-color-warning-text);
}

:is(.ry-alert--danger, ry-alert[type="danger"]) {
  background-color: var(--ry-color-danger-bg);
  border-color: var(--ry-color-danger);
  color: var(--ry-color-danger-text);
}

.ry-alert__title {
  font-weight: var(--ry-font-semibold);
}

/* ═══════════════════════════════════════════════════════════════
   FORM ELEMENTS
   ═══════════════════════════════════════════════════════════════ */

:is(.ry-input, ry-field input, ry-field textarea, ry-field select) {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-text-base);
  line-height: var(--ry-leading-normal);
  color: var(--ry-color-text);

  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-md);

  transition: border-color var(--ry-duration-fast) var(--ry-ease),
              box-shadow var(--ry-duration-fast) var(--ry-ease);
}

:is(.ry-input, ry-field input, ry-field textarea):hover {
  border-color: var(--ry-color-border-strong);
}

:is(.ry-input, ry-field input, ry-field textarea):focus {
  outline: none;
  border-color: var(--ry-color-primary);
  box-shadow: var(--ry-focus-ring);
}

:is(.ry-input, ry-field input, ry-field textarea)::placeholder {
  color: var(--ry-color-text-muted);
}

:is(.ry-input, ry-field input, ry-field textarea):disabled {
  background-color: var(--ry-color-bg-muted);
  opacity: 0.5;
}

:is(.ry-label, ry-field label) {
  font-size: var(--ry-text-sm);
  font-weight: var(--ry-font-medium);
  color: var(--ry-color-text);
}

.ry-field__error {
  font-size: var(--ry-text-sm);
  color: var(--ry-color-danger);
}

.ry-field__hint {
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text-muted);
}

/* Error state on input */
ry-field:has([data-ry-target="error"]:not(:empty)) :is(input, textarea, select) {
  border-color: var(--ry-color-danger);
}

ry-field:has([data-ry-target="error"]:not(:empty)) :is(input, textarea, select):focus {
  box-shadow: 0 0 0 3px light-dark(oklch(0.637 0.208 25.3 / 0.3), oklch(0.637 0.208 25.3 / 0.3));
}

/* ═══════════════════════════════════════════════════════════════
   ACCORDION
   ═══════════════════════════════════════════════════════════════ */

ry-accordion {
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-lg);
}

:is(.ry-accordion__item, ry-accordion-item) {
  border-block-end: var(--ry-border-width) solid var(--ry-color-border);
}

:is(.ry-accordion__item, ry-accordion-item):last-child {
  border-block-end: none;
}

.ry-accordion__trigger {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-text-base);
  font-weight: var(--ry-font-medium);
  color: var(--ry-color-text);
  background-color: transparent;
  transition: background-color var(--ry-duration-fast) var(--ry-ease);
}

.ry-accordion__trigger:hover {
  background-color: var(--ry-color-bg-subtle);
}

.ry-accordion__trigger:focus-visible {
  outline: none;
  box-shadow: inset var(--ry-focus-ring);
}

.ry-accordion__content {
  color: var(--ry-color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════════════════════ */

.ry-tabs__list {
  border-block-end: var(--ry-border-width) solid var(--ry-color-border);
}

.ry-tabs__trigger {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-text-sm);
  font-weight: var(--ry-font-medium);
  color: var(--ry-color-text-muted);
  background: transparent;
  transition: color var(--ry-duration-fast) var(--ry-ease),
              border-color var(--ry-duration-fast) var(--ry-ease);
}

.ry-tabs__trigger:hover {
  color: var(--ry-color-text);
}

.ry-tabs__trigger[aria-selected="true"] {
  color: var(--ry-color-primary);
  border-block-end-color: var(--ry-color-primary);
}

.ry-tabs__trigger:focus-visible {
  outline: none;
  box-shadow: var(--ry-focus-ring);
  border-radius: var(--ry-radius-sm);
}

/* ═══════════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════════ */

.ry-modal__backdrop {
  background-color: var(--ry-color-overlay);
}

.ry-modal__dialog {
  background-color: var(--ry-color-bg);
  border-radius: var(--ry-radius-xl);
  box-shadow: var(--ry-shadow-xl);
}

.ry-modal__header {
  border-block-end: var(--ry-border-width) solid var(--ry-color-border);
}

.ry-modal__title {
  font-size: var(--ry-text-lg);
  font-weight: var(--ry-font-semibold);
}

.ry-modal__close {
  font-size: var(--ry-text-xl);
  background: transparent;
  border-radius: var(--ry-radius-md);
  color: var(--ry-color-text-muted);
  transition: background-color var(--ry-duration-fast) var(--ry-ease),
              color var(--ry-duration-fast) var(--ry-ease);
}

.ry-modal__close:hover {
  background-color: var(--ry-color-bg-muted);
  color: var(--ry-color-text);
}

.ry-modal__footer {
  border-block-start: var(--ry-border-width) solid var(--ry-color-border);
  background-color: var(--ry-color-bg-subtle);
}

/* ═══════════════════════════════════════════════════════════════
   DROPDOWN
   ═══════════════════════════════════════════════════════════════ */

:is(.ry-dropdown__menu, ry-menu) {
  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-lg);
  box-shadow: var(--ry-shadow-lg);
}

:is(.ry-dropdown__item, ry-menu-item) {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text);
  background: transparent;
  border-radius: var(--ry-radius-md);
  transition: background-color var(--ry-duration-fast) var(--ry-ease);
}

:is(.ry-dropdown__item, ry-menu-item):hover {
  background-color: var(--ry-color-bg-muted);
}

:is(.ry-dropdown__item, ry-menu-item):focus-visible {
  outline: none;
  box-shadow: inset var(--ry-focus-ring);
}

.ry-dropdown__divider {
  background-color: var(--ry-color-border);
}

/* ═══════════════════════════════════════════════════════════════
   SWITCH
   ═══════════════════════════════════════════════════════════════ */

ry-switch[disabled] {
  opacity: 0.5;
}

.ry-switch__track {
  background-color: var(--ry-color-bg-muted);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-full);
  transition: background-color var(--ry-duration-fast) var(--ry-ease),
              border-color var(--ry-duration-fast) var(--ry-ease);
}

ry-switch[checked] .ry-switch__track {
  background-color: var(--ry-color-primary);
  border-color: var(--ry-color-primary);
}

.ry-switch__thumb {
  background-color: var(--ry-color-bg);
  border-radius: var(--ry-radius-full);
  box-shadow: var(--ry-shadow-sm);
}

.ry-switch__label {
  font-size: var(--ry-text-sm);
  font-weight: var(--ry-font-medium);
  color: var(--ry-color-text);
}

ry-switch:focus-visible .ry-switch__track {
  box-shadow: var(--ry-focus-ring);
}

/* ═══════════════════════════════════════════════════════════════
   TOOLTIP
   ═══════════════════════════════════════════════════════════════ */

.ry-tooltip__content {
  font-size: var(--ry-text-xs);
  font-weight: var(--ry-font-medium);
  line-height: var(--ry-leading-tight);
  background-color: var(--ry-color-text);
  color: var(--ry-color-text-inverse);
  border-radius: var(--ry-radius-md);
}

/* ═══════════════════════════════════════════════════════════════
   DRAWER
   ═══════════════════════════════════════════════════════════════ */

.ry-drawer__backdrop {
  background-color: var(--ry-color-overlay);
}

.ry-drawer__panel {
  background-color: var(--ry-color-bg);
  box-shadow: var(--ry-shadow-xl);
}

.ry-drawer__panel[data-ry-side="bottom"] {
  border-radius: var(--ry-radius-xl) var(--ry-radius-xl) 0 0;
}

.ry-drawer__close {
  font-size: var(--ry-text-xl);
  background: transparent;
  border-radius: var(--ry-radius-md);
  color: var(--ry-color-text-muted);
  transition: background-color var(--ry-duration-fast) var(--ry-ease),
              color var(--ry-duration-fast) var(--ry-ease);
}

.ry-drawer__close:hover {
  background-color: var(--ry-color-bg-muted);
  color: var(--ry-color-text);
}

/* ═══════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════ */

ry-toast {
  font-family: var(--ry-font-sans);
  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-lg);
  box-shadow: var(--ry-shadow-lg);
}

.ry-toast__icon {
  font-size: var(--ry-text-sm);
}

ry-toast[type="info"] .ry-toast__icon {
  color: var(--ry-color-info);
}

ry-toast[type="success"] .ry-toast__icon {
  color: var(--ry-color-success);
}

ry-toast[type="warning"] .ry-toast__icon {
  color: var(--ry-color-warning);
}

ry-toast[type="error"] .ry-toast__icon {
  color: var(--ry-color-danger);
}

.ry-toast__content {
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text);
  line-height: var(--ry-leading-normal);
}

.ry-toast__close {
  font-size: var(--ry-text-lg);
  background: transparent;
  border-radius: var(--ry-radius-sm);
  color: var(--ry-color-text-muted);
  transition: background-color var(--ry-duration-fast) var(--ry-ease),
              color var(--ry-duration-fast) var(--ry-ease);
}

.ry-toast__close:hover {
  background-color: var(--ry-color-bg-muted);
  color: var(--ry-color-text);
}

/* ═══════════════════════════════════════════════════════════════
   SELECT
   ═══════════════════════════════════════════════════════════════ */

ry-select[disabled] {
  opacity: 0.5;
}

.ry-select__trigger {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-text-base);
  line-height: var(--ry-leading-normal);
  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-md);
  transition: border-color var(--ry-duration-fast) var(--ry-ease),
              box-shadow var(--ry-duration-fast) var(--ry-ease);
}

ry-select:hover .ry-select__trigger {
  border-color: var(--ry-color-border-strong);
}

ry-select:focus-visible .ry-select__trigger {
  outline: none;
  border-color: var(--ry-color-primary);
  box-shadow: var(--ry-focus-ring);
}

ry-select[data-ry-state="open"] .ry-select__trigger {
  border-color: var(--ry-color-primary);
}

.ry-select__value {
  color: var(--ry-color-text-muted);
}

.ry-select__value--selected {
  color: var(--ry-color-text);
}

.ry-select__arrow {
  font-size: var(--ry-text-xs);
  color: var(--ry-color-text-muted);
}

.ry-select__dropdown {
  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-lg);
  box-shadow: var(--ry-shadow-lg);
}

.ry-select__option {
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text);
  border-radius: var(--ry-radius-md);
  transition: background-color var(--ry-duration-fast) var(--ry-ease);
}

.ry-select__option:is(:hover, [data-highlighted]) {
  background-color: var(--ry-color-bg-muted);
}

.ry-select__option[aria-selected="true"] {
  background-color: var(--ry-color-primary);
  color: var(--ry-color-text-inverse);
}

.ry-select__option[data-disabled] {
  opacity: 0.5;
}

.ry-select__option[data-disabled]:hover {
  background-color: transparent;
}

/* Multi-select checkmarks */
.ry-select__check {
  color: var(--ry-color-primary);
}

.ry-select__clear {
  background: transparent;
  color: var(--ry-color-text-muted);
  border-radius: var(--ry-radius-full);
  transition: color var(--ry-duration-fast) var(--ry-ease);
}

.ry-select__clear:hover {
  color: var(--ry-color-text);
}

/* Multi: checkmark is the indicator, no bg change on selected */
ry-select[multiple] .ry-select__option[aria-selected="true"] {
  background-color: transparent;
  color: var(--ry-color-text);
}

ry-select[multiple] .ry-select__option[aria-selected="true"]:is(:hover, [data-highlighted]) {
  background-color: var(--ry-color-bg-muted);
}

/* ═══════════════════════════════════════════════════════════════
   CODE
   ═══════════════════════════════════════════════════════════════ */

ry-code {
  background-color: var(--ry-code-bg);
  border-radius: var(--ry-radius-lg);
  box-shadow: var(--ry-shadow-lg);
}

.ry-code__header {
  background-color: var(--ry-code-header-bg);
}

.ry-code__title {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-text-xs);
  font-weight: var(--ry-font-bold);
  color: var(--ry-code-title-color);
}

.ry-code__copy {
  background: transparent;
  border-radius: var(--ry-radius-full);
  color: var(--ry-code-icon-color);
  transition: background-color var(--ry-duration-fast) var(--ry-ease),
              color var(--ry-duration-fast) var(--ry-ease);
}

.ry-code__copy:hover {
  background-color: var(--ry-code-icon-hover-bg);
  color: var(--ry-code-icon-hover-color);
}

.ry-code__copy--success {
  color: var(--ry-color-success);
}

:is(.ry-code__pre, .ry-code__code) {
  font-family: var(--ry-font-mono);
  font-size: var(--ry-text-sm);
  line-height: var(--ry-leading-relaxed);
  color: var(--ry-code-text-color);
}

.ry-code__line-number {
  color: var(--ry-code-line-number-color);
  border-inline-end: 1px solid var(--ry-code-line-border-color);
}

.ry-code__color-preview {
  border: 1px solid var(--ry-code-color-preview-border);
  border-radius: var(--ry-radius-sm);
}

/* Syntax highlighting colors */
.ry-code__keyword {
  color: var(--ry-code-keyword);
}

.ry-code__property {
  color: var(--ry-code-property);
}

.ry-code__value {
  color: var(--ry-code-value);
}

.ry-code__string {
  color: var(--ry-code-string);
}

.ry-code__number {
  color: var(--ry-code-number);
}

.ry-code__comment {
  color: var(--ry-code-comment);
  font-style: italic;
}

.ry-code__selector {
  color: var(--ry-code-selector);
}

.ry-code__punctuation {
  color: var(--ry-code-punctuation);
}

.ry-code__tag {
  color: var(--ry-code-tag);
}

.ry-code__attribute {
  color: var(--ry-code-attribute);
}

.ry-code__color {
  color: var(--ry-code-value);
}

/* ═══════════════════════════════════════════════════════════════
   EXAMPLE
   ═══════════════════════════════════════════════════════════════ */

.ry-example__preview {
  background-color: var(--ry-color-bg-subtle);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-lg);
}

.ry-example__usage-toggle {
  background-color: var(--ry-color-bg-subtle);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-md);
  color: var(--ry-color-text-muted);
  font-size: var(--ry-text-sm);
  font-weight: 500;
}

.ry-example__usage-toggle:hover {
  background-color: var(--ry-color-bg-hover);
  color: var(--ry-color-text);
}

/* ═══════════════════════════════════════════════════════════════
   ICON
   ═══════════════════════════════════════════════════════════════ */

ry-icon {
  color: currentColor;
}

/* ═══════════════════════════════════════════════════════════════
   CHECKBOX
   ═══════════════════════════════════════════════════════════════ */

input[type="checkbox"] {
  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-sm);
  transition: background-color var(--ry-duration-fast) var(--ry-ease),
              border-color var(--ry-duration-fast) var(--ry-ease),
              box-shadow var(--ry-duration-fast) var(--ry-ease);
}

input[type="checkbox"]:hover {
  border-color: var(--ry-color-border-strong);
}

input[type="checkbox"]:focus-visible {
  outline: none;
  border-color: var(--ry-color-primary);
  box-shadow: var(--ry-focus-ring);
}

input[type="checkbox"]:checked {
  background-color: var(--ry-color-primary);
  border-color: var(--ry-color-primary);
}

input[type="checkbox"]:checked:hover {
  background-color: var(--ry-color-primary-hover);
  border-color: var(--ry-color-primary-hover);
}

input[type="checkbox"]::after {
  border-inline-end: 2px solid var(--ry-color-text-inverse);
  border-block-end: 2px solid var(--ry-color-text-inverse);
  margin-bottom: 2px;
}

input[type="checkbox"]:disabled {
  opacity: 0.5;
  background-color: var(--ry-color-bg-muted);
}

/* ═══════════════════════════════════════════════════════════════
   RADIO
   ═══════════════════════════════════════════════════════════════ */

input[type="radio"] {
  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-full);
  transition: background-color var(--ry-duration-fast) var(--ry-ease),
              border-color var(--ry-duration-fast) var(--ry-ease),
              box-shadow var(--ry-duration-fast) var(--ry-ease);
}

input[type="radio"]:hover {
  border-color: var(--ry-color-border-strong);
}

input[type="radio"]:focus-visible {
  outline: none;
  border-color: var(--ry-color-primary);
  box-shadow: var(--ry-focus-ring);
}

input[type="radio"]:checked {
  border-color: var(--ry-color-primary);
}

input[type="radio"]:checked:hover {
  border-color: var(--ry-color-primary-hover);
}

input[type="radio"]::after {
  background-color: var(--ry-color-primary);
  border-radius: var(--ry-radius-full);
}

input[type="radio"]:disabled {
  opacity: 0.5;
  background-color: var(--ry-color-bg-muted);
}

/* ═══════════════════════════════════════════════════════════════
   TABLE
   ═══════════════════════════════════════════════════════════════ */

table {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text);
}

th {
  font-weight: var(--ry-font-semibold);
  color: var(--ry-color-text);
  background-color: var(--ry-color-bg-subtle);
  border-block-end: var(--ry-border-width) solid var(--ry-color-border);
}

td {
  border-block-end: var(--ry-border-width) solid var(--ry-color-border);
}

tbody tr:last-child td {
  border-block-end: none;
}

tbody tr:hover {
  background-color: var(--ry-color-bg-subtle);
}

/* Table variants */
table[data-bordered] {
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-lg);
}

table[data-bordered] :is(th, td) {
  border: var(--ry-border-width) solid var(--ry-color-border);
}

table[data-striped] tbody tr:nth-child(even) {
  background-color: var(--ry-color-bg-subtle);
}

table[data-striped] tbody tr:hover {
  background-color: var(--ry-color-bg-muted);
}

/* ═══════════════════════════════════════════════════════════════
   COLOR PICKER
   ═══════════════════════════════════════════════════════════════ */

ry-color-picker[disabled] {
  opacity: 0.5;
}

/* Trigger button */
ry-color-picker [data-ry-target="trigger"] {
  background-color: var(--ry-color-bg);
  background-image: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%);
  background-size: 8px 8px;
  border-radius: var(--ry-radius-md);
  overflow: hidden;
}

ry-color-picker [data-ry-target="trigger"]:focus-visible {
  box-shadow: var(--ry-focus-ring);
}

ry-color-picker [data-ry-target="trigger-color"] {
  border-radius: calc(var(--ry-radius-md) - 1px);
  outline: 3px solid oklch(0 0 0 / 0.2);
  outline-offset: -3px;
}

ry-color-picker [data-ry-target="trigger-color"] {
  border-radius: calc(var(--ry-radius-md) - 1px);
}

/* Panel */
ry-color-picker [data-ry-target="panel"] {
  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-lg);
  box-shadow: var(--ry-shadow-lg);
}

/* Grid */
ry-color-picker [data-ry-target="grid"] {
  background-color: var(--grid-hue-color, #ff0000);
  background-image:
    linear-gradient(to top, #000 0%, transparent 100%),
    linear-gradient(to right, #fff 0%, transparent 100%);
  border-radius: var(--ry-radius-lg) var(--ry-radius-lg) 0 0;
}

ry-color-picker [data-ry-target="grid-handle"] {
  background-color: transparent;
  border: 2px solid #fff;
  border-radius: var(--ry-radius-full);
  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.3), inset 0 0 0 1px oklch(0 0 0 / 0.3);
}

ry-color-picker [data-ry-target="grid-handle"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.3), inset 0 0 0 1px oklch(0 0 0 / 0.3), var(--ry-focus-ring);
}

/* Hue slider */
ry-color-picker .ry-color-picker__hue {
  background: linear-gradient(
    to right,
    hsl(0, 100%, 50%) 0%,
    hsl(60, 100%, 50%) 17%,
    hsl(120, 100%, 50%) 33%,
    hsl(180, 100%, 50%) 50%,
    hsl(240, 100%, 50%) 67%,
    hsl(300, 100%, 50%) 83%,
    hsl(360, 100%, 50%) 100%
  );
  border-radius: var(--ry-radius-full);
}

/* Alpha slider */
ry-color-picker .ry-color-picker__alpha {
  /* Checkerboard pattern for transparency */
  background-image:
    linear-gradient(to right, transparent 0%, var(--alpha-color, #ff0000) 100%),
    repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%);
  background-size: 100% 100%, 8px 8px;
  border-radius: var(--ry-radius-full);
}

/* Slider handles */
ry-color-picker .ry-color-picker__slider-handle {
  background-color: #fff;
  border-radius: var(--ry-radius-full);
  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.2), var(--ry-shadow-sm);
}

ry-color-picker .ry-color-picker__slider-handle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.2), var(--ry-focus-ring);
}

/* Preview */
ry-color-picker [data-ry-target="preview"] {
  background-image: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%);
  background-size: 8px 8px;
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-md);
  overflow: hidden;
}

ry-color-picker [data-ry-target="preview-color"] {
  border-radius: inherit;
  outline: 3px solid oklch(0 0 0 / 0.2);
  outline-offset: -3px;
}

/* Input */
ry-color-picker [data-ry-target="input"] {
  font-family: var(--ry-font-mono);
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text);
  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-md);
  transition: border-color var(--ry-duration-fast) var(--ry-ease),
              box-shadow var(--ry-duration-fast) var(--ry-ease);
}

ry-color-picker [data-ry-target="input"]:hover {
  border-color: var(--ry-color-border-strong);
}

ry-color-picker [data-ry-target="input"]:focus {
  outline: none;
  border-color: var(--ry-color-primary);
  box-shadow: var(--ry-focus-ring);
}

/* Format toggle */
ry-color-picker [data-ry-target="format-toggle"] {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-text-xs);
  font-weight: var(--ry-font-semibold);
  color: var(--ry-color-text-muted);
  background-color: var(--ry-color-bg-muted);
  border-radius: var(--ry-radius-md);
  transition: background-color var(--ry-duration-fast) var(--ry-ease),
              color var(--ry-duration-fast) var(--ry-ease);
}

ry-color-picker [data-ry-target="format-toggle"]:hover {
  background-color: var(--ry-color-bg-subtle);
  color: var(--ry-color-text);
}

ry-color-picker [data-ry-target="format-toggle"]:focus-visible {
  outline: none;
  box-shadow: var(--ry-focus-ring);
}

/* Swatches */
ry-color-picker .ry-color-picker__swatch {
  border-radius: var(--ry-radius-sm);
  transition: transform var(--ry-duration-fast) var(--ry-ease),
              box-shadow var(--ry-duration-fast) var(--ry-ease);
}

ry-color-picker .ry-color-picker__swatch:hover {
  transform: scale(1.1);
  box-shadow: var(--ry-shadow-md);
}

ry-color-picker .ry-color-picker__swatch:focus-visible {
  outline: none;
  box-shadow: var(--ry-focus-ring);
}

/* ═══════════════════════════════════════════════════════════════
   COLOR INPUT
   ═══════════════════════════════════════════════════════════════ */

ry-color-input[disabled] {
  opacity: 0.5;
}

ry-color-input [data-ry-target="trigger"] {
  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-md);
  overflow: hidden;
  transition: border-color var(--ry-duration-fast) var(--ry-ease),
              box-shadow var(--ry-duration-fast) var(--ry-ease);
}

ry-color-input:hover [data-ry-target="trigger"] {
  border-color: var(--ry-color-border-strong);
}

ry-color-input:focus-within [data-ry-target="trigger"] {
  border-color: var(--ry-color-primary);
  box-shadow: var(--ry-focus-ring);
}

ry-color-input [data-ry-target="swatch"] {
  background-image: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%);
  background-size: 8px 8px;
  border-inline-end: var(--ry-border-width) solid var(--ry-color-border);
  transition: background-color var(--ry-duration-fast) var(--ry-ease);
}

ry-color-input [data-ry-target="swatch"]:hover {
  background-color: var(--ry-color-bg-muted);
}

ry-color-input [data-ry-target="swatch"]:focus-visible {
  outline: none;
}

ry-color-input [data-ry-target="swatch-color"] {
  box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.1);
}

ry-color-input [data-ry-target="input"] {
  font-family: var(--ry-font-mono);
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text);
  background-color: transparent;
  border: none;
}

ry-color-input [data-ry-target="input"]:focus {
  outline: none;
}

ry-color-input [data-ry-target="input"]::placeholder {
  color: var(--ry-color-text-muted);
}

ry-color-input [data-ry-target="panel"] {
  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-lg);
  box-shadow: var(--ry-shadow-lg);
}

/* ═══════════════════════════════════════════════════════════════
   GRADIENT PICKER
   ═══════════════════════════════════════════════════════════════ */

ry-gradient-picker {
  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-lg);
  box-shadow: var(--ry-shadow-md);
}

ry-gradient-picker[disabled] {
  opacity: 0.5;
}

/* Type toggle buttons */
ry-gradient-picker [data-ry-target="type-toggle"] button {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-text-xs);
  background-color: transparent;
  color: var(--ry-color-text-muted);
  border-radius: var(--ry-radius-sm);
  transition: background-color var(--ry-duration-fast) var(--ry-ease),
              color var(--ry-duration-fast) var(--ry-ease);
}

ry-gradient-picker [data-ry-target="type-toggle"] button:hover {
  background-color: var(--ry-color-bg-subtle);
}

ry-gradient-picker [data-ry-target="type-toggle"] button[data-active] {
  background-color: var(--ry-color-primary);
  color: var(--ry-color-text-inverse);
}

/* Shape toggle */
ry-gradient-picker [data-ry-target="shape-control"] button {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-text-xs);
  background-color: transparent;
  color: var(--ry-color-text-muted);
  border-radius: var(--ry-radius-sm);
  transition: background-color var(--ry-duration-fast) var(--ry-ease),
              color var(--ry-duration-fast) var(--ry-ease);
}

ry-gradient-picker [data-ry-target="shape-control"] button:hover {
  background-color: var(--ry-color-bg-subtle);
}

ry-gradient-picker [data-ry-target="shape-control"] button[data-active] {
  background-color: var(--ry-color-primary);
  color: var(--ry-color-text-inverse);
}

/* Gradient bar */
ry-gradient-picker [data-ry-target="bar"] {
  border-radius: var(--ry-radius-full, 9999px);
  box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.1);
}

/* Stop handles */
ry-gradient-picker [data-ry-target="stop"] {
  background-color: var(--stop-color, #fff);
  border: 2px solid #fff;
  border-radius: var(--ry-radius-full);
  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.3), var(--ry-shadow-sm);
  transition: transform var(--ry-duration-fast) var(--ry-ease),
              opacity var(--ry-duration-fast) var(--ry-ease);
}

ry-gradient-picker [data-ry-target="stop"][data-selected] {
  box-shadow: 0 0 0 2px var(--ry-color-primary), var(--ry-shadow-md);
}

ry-gradient-picker [data-ry-target="stop"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ry-color-primary), var(--ry-focus-ring);
}

/* CSS output */
ry-gradient-picker [data-ry-target="output"] {
  font-family: var(--ry-font-mono);
  font-size: var(--ry-text-xs);
  color: var(--ry-color-text);
  background-color: var(--ry-color-bg-subtle);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-sm);
  transition: border-color var(--ry-duration-fast) var(--ry-ease),
              box-shadow var(--ry-duration-fast) var(--ry-ease);
}

ry-gradient-picker [data-ry-target="output"]:focus {
  outline: none;
  border-color: var(--ry-color-primary);
  box-shadow: var(--ry-focus-ring);
}

/* Copy button */
ry-gradient-picker [data-ry-target="copy-btn"] {
  background-color: transparent;
  color: var(--ry-color-text-muted);
  border-radius: var(--ry-radius-sm);
  transition: background-color var(--ry-duration-fast) var(--ry-ease),
              color var(--ry-duration-fast) var(--ry-ease);
}

ry-gradient-picker [data-ry-target="copy-btn"]:hover {
  background-color: var(--ry-color-bg-subtle);
  color: var(--ry-color-text);
}

ry-gradient-picker [data-ry-target="copy-btn"][data-copied] {
  color: var(--ry-color-success);
}

/* ═══════════════════════════════════════════════════════════════
   TREE
   ═══════════════════════════════════════════════════════════════ */

ry-tree {
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-lg);
  padding: var(--ry-space-6);
  background-color: var(--ry-color-bg);
  box-shadow: var(--ry-shadow-sm);
}

/* Vertical connector line */
.ry-tree__children {
  border-inline-start: 1px solid var(--ry-color-border);
}

/* Horizontal connector line */
.ry-tree__children .ry-tree__item::before {
  background-color: var(--ry-color-border);
}

:is(.ry-tree__label, .ry-tree__file) {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text);
  border-radius: var(--ry-radius-sm);
  transition: background-color var(--ry-duration-fast) var(--ry-ease);
}

:is(.ry-tree__label, .ry-tree__file):hover {
  background-color: var(--ry-color-bg-muted);
}

.ry-tree__file[data-ry-selected] {
  background-color: var(--ry-color-bg-muted);
  color: var(--ry-color-text);
  font-weight: var(--ry-font-medium);
}

.ry-tree__icon {
  color: var(--ry-color-text-muted);
}

/* Open folder icon gets stronger color */
.ry-tree__toggle:checked ~ .ry-tree__label .ry-tree__icon {
  color: var(--ry-color-text);
}

/* Exclude tree toggle checkboxes from global checkbox styling */
input[type="checkbox"].ry-tree__toggle {
  background: none;
  border: none;
  box-shadow: none;
}

input[type="checkbox"].ry-tree__toggle::after {
  display: none;
}

/* ── Drag and Drop ── */

.ry-tree__ghost {
  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-primary);
  border-radius: var(--ry-radius-sm);
  box-shadow: var(--ry-shadow-lg);
  opacity: 0.85;
}

.ry-tree__item--collapsed {
  background-color: color-mix(in oklch, var(--ry-color-primary) 10%, transparent);
  border-radius: var(--ry-radius-sm);
}

.ry-tree__item:is([data-ry-drop-target="before"], [data-ry-drop-target="after"])::after {
  background-color: var(--ry-color-primary);
}

.ry-tree__item[data-ry-drop-target="inside"] > .ry-tree__label {
  background-color: var(--ry-color-primary);
  color: var(--ry-color-text-inverse);
  border-radius: var(--ry-radius-sm);
}

.ry-tree__item[data-ry-drop-target="inside"] > .ry-tree__label .ry-tree__icon {
  color: var(--ry-color-text-inverse);
}

/* ═══════════════════════════════════════════════════════════════
   TAG
   ═══════════════════════════════════════════════════════════════ */

ry-tag {
  font-size: var(--ry-text-xs);
  font-weight: var(--ry-font-medium);
  background-color: var(--ry-color-bg-muted);
  color: var(--ry-color-text);
  border-radius: var(--ry-radius-full);
}

ry-tag[variant="primary"] {
  background-color: var(--ry-color-primary);
  color: var(--ry-color-text-inverse);
}

ry-tag[variant="success"] {
  background-color: var(--ry-color-success);
  color: var(--ry-color-text-inverse);
}

ry-tag[variant="warning"] {
  background-color: var(--ry-color-warning);
  color: var(--ry-color-text);
}

ry-tag[variant="danger"] {
  background-color: var(--ry-color-danger);
  color: var(--ry-color-text-inverse);
}

ry-tag[disabled] {
  opacity: 0.5;
}

.ry-tag__remove {
  background: transparent;
  color: currentColor;
  border-radius: var(--ry-radius-full);
  opacity: 0.6;
  transition: opacity var(--ry-duration-fast) var(--ry-ease);
}

.ry-tag__remove:hover {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   TAG INPUT
   ═══════════════════════════════════════════════════════════════ */

.ry-tag-input__container {
  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-md);
  transition: border-color var(--ry-duration-fast) var(--ry-ease),
              box-shadow var(--ry-duration-fast) var(--ry-ease);
}

.ry-tag-input__container:hover {
  border-color: var(--ry-color-border-strong);
}

.ry-tag-input__container:focus-within {
  border-color: var(--ry-color-primary);
  box-shadow: var(--ry-focus-ring);
}

.ry-tag-input__input {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text);
  background: transparent;
  border: none;
}

.ry-tag-input__input:focus,
.ry-tag-input__input:focus-visible {
  outline: none;
  box-shadow: none;
}

.ry-tag-input__input::placeholder {
  color: var(--ry-color-text-muted);
}

ry-tag-input[disabled] .ry-tag-input__container {
  opacity: 0.5;
  background-color: var(--ry-color-bg-muted);
}

/* ═══════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════ */

ry-hero h1 {
  font-size: var(--ry-text-4xl);
  font-weight: var(--ry-font-bold);
  line-height: var(--ry-leading-tight);
  color: var(--ry-color-text);
}

ry-hero p {
  font-size: var(--ry-text-lg);
  line-height: var(--ry-leading-relaxed);
  color: var(--ry-color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   STAT
   ═══════════════════════════════════════════════════════════════ */

.ry-stat__value {
  font-size: var(--ry-text-3xl);
  font-weight: var(--ry-font-bold);
  color: var(--ry-color-text);
}

ry-stat[size="sm"] .ry-stat__value {
  font-size: var(--ry-text-2xl);
}

ry-stat[size="lg"] .ry-stat__value {
  font-size: var(--ry-text-4xl);
}

.ry-stat__label {
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text-muted);
}

.ry-stat__trend--up {
  color: var(--ry-color-success);
}

.ry-stat__trend--down {
  color: var(--ry-color-danger);
}

/* ═══════════════════════════════════════════════════════════════
   FEATURE
   ═══════════════════════════════════════════════════════════════ */

.ry-feature__icon {
  background-color: var(--ry-color-primary);
  color: var(--ry-color-text-inverse);
  border-radius: var(--ry-radius-full);
}

ry-feature h3 {
  font-size: var(--ry-text-lg);
  font-weight: var(--ry-font-semibold);
  color: var(--ry-color-text);
}

ry-feature p {
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text-muted);
  line-height: var(--ry-leading-relaxed);
}

/* ═══════════════════════════════════════════════════════════════
   PRICING
   ═══════════════════════════════════════════════════════════════ */

ry-pricing-card {
  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-xl);
  box-shadow: var(--ry-shadow-sm);
}

ry-pricing-card[featured] {
  border-color: var(--ry-color-primary);
  box-shadow: var(--ry-shadow-lg);
}

ry-pricing-card h3 {
  font-size: var(--ry-text-xl);
  font-weight: var(--ry-font-semibold);
  color: var(--ry-color-text);
}

.ry-pricing-card__price {
  font-size: var(--ry-text-4xl);
  font-weight: var(--ry-font-bold);
  color: var(--ry-color-text);
}

.ry-pricing-card__price span {
  font-size: var(--ry-text-base);
  font-weight: var(--ry-font-normal);
  color: var(--ry-color-text-muted);
}

ry-pricing-card ul li {
  border-block-end: var(--ry-border-width) solid var(--ry-color-border);
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text-muted);
}

ry-pricing-card ul li:last-child {
  border-block-end: none;
}

/* ═══════════════════════════════════════════════════════════════
   CAROUSEL
   ═══════════════════════════════════════════════════════════════ */

.ry-carousel__arrow {
  background-color: var(--ry-color-bg);
  color: var(--ry-color-text);
  border-radius: var(--ry-radius-full);
  box-shadow: var(--ry-shadow-md);
  transition: background-color var(--ry-duration-fast) var(--ry-ease),
              box-shadow var(--ry-duration-fast) var(--ry-ease);
}

.ry-carousel__arrow:hover {
  background-color: var(--ry-color-bg-muted);
  box-shadow: var(--ry-shadow-lg);
}

.ry-carousel__arrow:focus-visible {
  outline: none;
  box-shadow: var(--ry-focus-ring);
}

.ry-carousel__dot {
  background-color: var(--ry-color-border);
  border-radius: var(--ry-radius-full);
  transition: background-color var(--ry-duration-fast) var(--ry-ease);
}

.ry-carousel__dot[data-active] {
  background-color: var(--ry-color-primary);
}

.ry-carousel__dot:hover {
  background-color: var(--ry-color-primary-hover);
}

/* ═══════════════════════════════════════════════════════════════
   CHECK LIST
   ═══════════════════════════════════════════════════════════════ */

.ry-check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ry-check-list li {
  padding-inline-start: var(--ry-space-6);
  position: relative;
  margin-block-end: var(--ry-space-2);
  color: var(--ry-color-text);
}

.ry-check-list li::before {
  content: '\2713';
  position: absolute;
  inset-inline-start: 0;
  color: var(--ry-color-success);
  font-weight: var(--ry-font-bold);
}

/* ═══════════════════════════════════════════════════════════════
   COMBOBOX
   ═══════════════════════════════════════════════════════════════ */

ry-combobox[disabled] {
  opacity: 0.5;
}

.ry-combobox__input-wrapper {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-text-base);
  line-height: var(--ry-leading-normal);
  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-md);
  transition: border-color var(--ry-duration-fast) var(--ry-ease),
              box-shadow var(--ry-duration-fast) var(--ry-ease);
}

ry-combobox:hover .ry-combobox__input-wrapper {
  border-color: var(--ry-color-border-strong);
}

ry-combobox:focus-within .ry-combobox__input-wrapper {
  border-color: var(--ry-color-primary);
  box-shadow: 0 0 0 1px var(--ry-color-primary);
}

ry-combobox[data-ry-state="open"] .ry-combobox__input-wrapper {
  border-color: var(--ry-color-primary);
}

.ry-combobox__input {
  font: inherit;
  color: var(--ry-color-text);
}

.ry-combobox__input:focus,
.ry-combobox__input:focus-visible {
  outline: none;
  box-shadow: none;
}

.ry-combobox__input::placeholder {
  color: var(--ry-color-text-muted);
}

.ry-combobox__arrow {
  font-size: var(--ry-text-xs);
  color: var(--ry-color-text-muted);
}

.ry-combobox__dropdown {
  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-lg);
  box-shadow: var(--ry-shadow-lg);
}

.ry-combobox__option {
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text);
  border-radius: var(--ry-radius-md);
  transition: background-color var(--ry-duration-fast) var(--ry-ease);
}

.ry-combobox__option[data-highlighted] {
  background-color: var(--ry-color-bg-muted);
}

.ry-combobox__option[aria-selected="true"] {
  background-color: var(--ry-color-primary);
  color: var(--ry-color-text-inverse);
}

.ry-combobox__option[data-disabled] {
  opacity: 0.5;
}

.ry-combobox__option[data-disabled]:hover {
  background-color: transparent;
}

.ry-combobox__empty {
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   LOGO BAR
   ═══════════════════════════════════════════════════════════════ */

ry-logo-bar > p {
  color: var(--ry-color-text-muted);
  font-size: var(--ry-text-sm);
  font-family: var(--ry-font-sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

ry-logo-bar span {
  font-size: var(--ry-text-2xl);
  font-weight: var(--ry-font-bold);
  font-family: var(--ry-font-sans);
  color: var(--ry-color-text);
  opacity: 0.5;
  transition: opacity var(--ry-duration-fast) var(--ry-ease);
}

ry-logo-bar span:hover {
  opacity: 0.8;
}

ry-logo-bar img {
  opacity: 0.5;
  transition: opacity var(--ry-duration-fast) var(--ry-ease);
}

ry-logo-bar img:hover {
  opacity: 0.8;
}

/* ═══════════════════════════════════════════════════════════════
   TESTIMONIAL
   ═══════════════════════════════════════════════════════════════ */

.ry-testimonial__quote {
  font-size: var(--ry-text-lg);
  font-style: italic;
  line-height: var(--ry-leading-relaxed);
  color: var(--ry-color-text);
}

.ry-testimonial__name {
  font-weight: var(--ry-font-semibold);
  color: var(--ry-color-text);
}

.ry-testimonial__role {
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text-muted);
}

.ry-testimonial__star {
  color: var(--ry-color-warning);
}

.ry-testimonial__star svg {
  fill: var(--ry-color-warning);
}

.ry-testimonial__avatar {
  background-color: var(--ry-color-bg-muted);
  border: 2px solid var(--ry-color-border);
}

/* ═══════════════════════════════════════════════════════════════
   "NONE" THEME — flat, no flourish
   Default theme minus radii, shadows, and decorative extras.
   Proves FORM/THEME separation: structure handles all layout.
   ═══════════════════════════════════════════════════════════════ */

[data-ry-theme="none"] {
  /* Strictly black and white */
  --ry-color-primary: light-dark(#000000, #ffffff);
  --ry-color-primary-hover: light-dark(#333333, #cccccc);
  --ry-color-primary-active: light-dark(#555555, #aaaaaa);
  --ry-color-secondary: light-dark(#000000, #ffffff);
  --ry-color-secondary-hover: light-dark(#333333, #cccccc);
  --ry-color-secondary-active: light-dark(#555555, #aaaaaa);
  --ry-color-accent: light-dark(#000000, #ffffff);
  --ry-color-accent-hover: light-dark(#333333, #cccccc);
  --ry-color-accent-active: light-dark(#555555, #aaaaaa);
  --ry-color-text: light-dark(#000000, #ffffff);
  --ry-color-text-muted: light-dark(#666666, #999999);
  --ry-color-text-inverse: light-dark(#ffffff, #000000);
  --ry-color-bg: light-dark(#ffffff, #000000);
  --ry-color-bg-subtle: light-dark(#f5f5f5, #0a0a0a);
  --ry-color-bg-muted: light-dark(#eeeeee, #111111);
  --ry-color-border: light-dark(#dddddd, #333333);
  --ry-color-border-strong: light-dark(#999999, #666666);
  --ry-color-overlay: light-dark(rgba(255,255,255,0.95), rgba(0,0,0,0.95));
  --ry-color-hover-overlay: light-dark(rgba(0,0,0,0.04), rgba(255,255,255,0.06));
  --ry-focus-ring: light-dark(0 0 0 3px rgba(0,0,0,0.3), 0 0 0 3px rgba(255,255,255,0.3));
  /* No radii, no shadows */
  --ry-radius-sm: 0;
  --ry-radius-md: 0;
  --ry-radius-lg: 0;
  --ry-radius-xl: 0;
  --ry-radius-2xl: 0;
  --ry-radius-full: 0;
  --ry-shadow-sm: none;
  --ry-shadow-md: none;
  --ry-shadow-lg: none;
  --ry-shadow-xl: none;
}

/* ═══════════════════════════════════════════════════════════════
   THEME PANEL
   ═══════════════════════════════════════════════════════════════ */

.ry-theme-panel {
  font-family: var(--ry-font-sans);
  background-color: var(--ry-color-bg);
  border-radius: var(--ry-radius-lg);
  box-shadow: var(--ry-shadow-lg);
  border: 1px solid var(--ry-color-border);
}

.ry-theme-panel__label {
  color: var(--ry-color-text-muted);
  font-weight: 600;
  font-size: 0.6875rem;
}

.ry-theme-panel__btn {
  border-radius: var(--ry-radius-sm);
  color: var(--ry-color-text-muted);
  transition: background-color var(--ry-duration-fast);
}

.ry-theme-panel__btn:hover {
  background-color: var(--ry-color-bg-muted);
}

.ry-theme-panel__btn[aria-pressed="true"] {
  background-color: var(--ry-color-primary);
  color: var(--ry-color-text-inverse);
}

/* ═══════════════════════════════════════════════════════════════
   HEADING
   ═══════════════════════════════════════════════════════════════ */

.ry-heading__title {
  font-size: var(--ry-text-2xl);
  font-weight: var(--ry-font-bold);
  line-height: var(--ry-leading-tight);
  color: var(--ry-color-text);
}

.ry-heading__sub {
  font-size: var(--ry-text-base);
  line-height: var(--ry-leading-normal);
  color: var(--ry-color-text-muted);
}

/* Size: sm */
ry-heading[size="sm"] .ry-heading__title {
  font-size: var(--ry-text-lg);
}

ry-heading[size="sm"] .ry-heading__sub {
  font-size: var(--ry-text-sm);
}

/* Size: lg */
ry-heading[size="lg"] .ry-heading__title {
  font-size: var(--ry-text-4xl);
}

ry-heading[size="lg"] .ry-heading__sub {
  font-size: var(--ry-text-lg);
}

/* Divider variant */
ry-heading[divider] {
  border-bottom: var(--ry-border-width) solid var(--ry-color-border);
}

/* ═══════════════════════════════════════════════════════════════
   SEARCH LIST
   ═══════════════════════════════════════════════════════════════ */

.ry-search-list__search {
  background-color: var(--ry-color-bg);
  border-bottom: var(--ry-border-width) solid var(--ry-color-border);
}

.ry-search-list__input {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text);
}

.ry-search-list__input::placeholder {
  color: var(--ry-color-text-muted);
}

.ry-search-list__item {
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text);
  border-radius: var(--ry-radius-md);
  transition: background-color var(--ry-duration-fast) var(--ry-ease);
}

.ry-search-list__item[data-highlighted] {
  background-color: var(--ry-color-bg-muted);
}

.ry-search-list__item[aria-selected="true"] {
  background-color: var(--ry-color-primary);
  color: var(--ry-color-text-inverse);
}

.ry-search-list__item[aria-selected="true"][data-highlighted] {
  background-color: var(--ry-color-primary-hover);
}

.ry-search-list__group-header {
  font-family: var(--ry-font-sans);
  font-weight: 600;
  color: var(--ry-color-text-muted);
}

.ry-search-list__empty {
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text-muted);
}

.ry-search-list__item mark {
  background-color: transparent;
  color: var(--ry-color-primary);
  font-weight: 600;
}

.ry-search-list__item[aria-selected="true"] mark {
  color: inherit;
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════════ */

.ry-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: var(--ry-font-semibold);
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text-muted);
}

.ry-avatar {
  border-radius: var(--ry-radius-full);
  object-fit: cover;
}

.ry-bg-subtle {
  background-color: var(--ry-color-bg-subtle);
}

.ry-bg-inverted {
  background-color: var(--ry-color-text);
  color: var(--ry-color-bg);
}

.ry-bg-inverted p {
  opacity: 0.7;
}

} /* @layer ry-theme */