@ryanhelsing/ry-ui/dist/css/ry-theme.css

Framework-agnostic, Light DOM web components. CSS is the source of truth.

/**
 * 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);