@gratiaos/ui 1.0.0

package/styles/badge.css

@@ -0,0 +1,175 @@
+/* ─────────────────────────────────────────────────────────────
+   Garden UI — Badge skin (opt‑in)
+   Whisper: "small truths, softly visible." 🌬️
+
+   Purpose
+     • Selector-only skin for the headless Badge primitive.
+     • Driven entirely by Garden tokens; no hardcoded hex.
+
+   Data API
+     • [data-ui='badge']                             — root
+     • [data-variant='soft|solid|outline|subtle']    — visual weight
+     • [data-tone='subtle|accent|positive|warning|danger']
+     • [data-size='sm|md']                           — size (spacing handled in TS via baseClasses)
+     • [data-depth='inherit|0|1|2|3']         — shadow depth passthrough (optional)
+
+   A11y
+     • Icon slots are presentational; TS hides them with `aria-hidden`.
+     • The text content is the accessible name (no duplicate announcements).
+
+   Notes
+     • Keep motion calm; no default hover animations here.
+     • Subtle uses neutral surface tokens for low-stakes metadata.
+     • Variants map tone to token palettes; tones override accent.
+   ──────────────────────────────────────────────────────────── */
+@layer components {
+  [data-ui='badge'] {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem; /* tighter than pill */
+    border-radius: 0.375rem; /* squarer than pill; tokenizable later */
+    line-height: 1;
+    white-space: nowrap;
+    border: 1px solid transparent;
+    font-weight: 500;
+    user-select: none;
+    font-size: var(--text-2xs, 0.6875rem); /* 11px fallback */
+    padding: 0.125rem 0.375rem;
+  }
+
+  /* Size hooks (spacing is mostly in TS baseClasses; expose here for skins) */
+  [data-ui='badge'][data-size='sm'] {
+    /* defaults already set above */
+  }
+  [data-ui='badge'][data-size='md'] {
+    font-size: var(--text-xs);
+    padding: 0.25rem 0.5rem;
+  }
+
+  /* Depth passthrough — opt‑in shadow (badges are usually flat) */
+  [data-ui='badge'][data-depth='inherit'] {
+    box-shadow: var(--depth-shadow, var(--shadow-depth-1));
+  }
+  [data-ui='badge'][data-depth='0'] { box-shadow: var(--shadow-depth-0); }
+  [data-ui='badge'][data-depth='1'] { box-shadow: var(--shadow-depth-1); }
+  [data-ui='badge'][data-depth='2'] { box-shadow: var(--shadow-depth-2); }
+  [data-ui='badge'][data-depth='3'] { box-shadow: var(--shadow-depth-3); }
+
+  [data-ui='badge'] [data-slot~='icon'] {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  /* Tone → focus ring color variable (used by :focus-visible) */
+  [data-ui='badge'][data-tone='subtle']  { --ring-accent: color-mix(in oklab, var(--color-text) 80%, white 20%); }
+  [data-ui='badge'][data-tone='accent']  { --ring-accent: color-mix(in oklab, var(--color-accent) 85%, white 15%); }
+  [data-ui='badge'][data-tone='positive']{ --ring-accent: color-mix(in oklab, var(--color-positive) 85%, white 15%); }
+  [data-ui='badge'][data-tone='warning'] { --ring-accent: color-mix(in oklab, var(--color-warning) 85%, white 15%); }
+  [data-ui='badge'][data-tone='danger']  { --ring-accent: color-mix(in oklab, var(--color-danger) 85%, white 15%); }
+
+  /* Focus-visible — gentle tokenized outline for interactive/focusable badges */
+  [data-ui='badge']:focus-visible {
+    outline: 2px solid var(--ring-accent, color-mix(in oklab, var(--color-accent) 85%, white 15%));
+    outline-offset: 2px;
+  }
+
+  /* Variants — default tone maps to accent */
+  [data-ui='badge'][data-variant='solid'] {
+    background: var(--color-accent);
+    color: var(--color-on-accent);
+  }
+  [data-ui='badge'][data-variant='soft'] {
+    background: color-mix(in oklab, var(--color-accent) 18%, transparent);
+    color: var(--color-accent);
+    border-color: color-mix(in oklab, var(--color-accent) 38%, transparent);
+  }
+  [data-ui='badge'][data-variant='outline'] {
+    background: transparent;
+    color: var(--color-accent);
+    border-color: var(--color-accent);
+  }
+
+  /* Tones — override accent mapping */
+  [data-ui='badge'][data-tone='positive'][data-variant='solid'] {
+    background: var(--color-positive);
+    color: var(--color-on-accent);
+  }
+  [data-ui='badge'][data-tone='warning'][data-variant='solid'] {
+    background: var(--color-warning);
+    color: var(--color-on-accent);
+  }
+  [data-ui='badge'][data-tone='danger'][data-variant='solid'] {
+    background: var(--color-danger);
+    color: var(--color-on-accent);
+  }
+
+  [data-ui='badge'][data-tone='positive'][data-variant='soft'] {
+    background: color-mix(in oklab, var(--color-positive) 18%, transparent);
+    color: var(--color-positive);
+    border-color: color-mix(in oklab, var(--color-positive) 38%, transparent);
+  }
+  [data-ui='badge'][data-tone='warning'][data-variant='soft'] {
+    background: color-mix(in oklab, var(--color-warning) 18%, transparent);
+    color: var(--color-warning);
+    border-color: color-mix(in oklab, var(--color-warning) 38%, transparent);
+  }
+  [data-ui='badge'][data-tone='danger'][data-variant='soft'] {
+    background: color-mix(in oklab, var(--color-danger) 18%, transparent);
+    color: var(--color-danger);
+    border-color: color-mix(in oklab, var(--color-danger) 38%, transparent);
+  }
+
+  [data-ui='badge'][data-tone='positive'][data-variant='outline'] {
+    color: var(--color-positive);
+    border-color: var(--color-positive);
+  }
+  [data-ui='badge'][data-tone='warning'][data-variant='outline'] {
+    color: var(--color-warning);
+    border-color: var(--color-warning);
+  }
+  [data-ui='badge'][data-tone='danger'][data-variant='outline'] {
+    color: var(--color-danger);
+    border-color: var(--color-danger);
+  }
+
+  /* Subtle — neutral surface, gentle border; text uses neutral color token */
+  [data-ui='badge'][data-variant='subtle'] {
+    background: var(--color-fill-subtle);
+    color: var(--color-text);
+    border-color: color-mix(in oklab, var(--color-text) 12%, transparent);
+  }
+  /* Optional: interactive hover/active soften (opt‑in or semantic elements) */
+  [data-ui='badge'][data-interactive='true'],
+  button[data-ui='badge'],
+  a[data-ui='badge'] {
+    transition: filter var(--duration-snug, 160ms) var(--ease-soft, ease);
+  }
+  [data-ui='badge'][data-interactive='true']:hover,
+  button[data-ui='badge']:hover,
+  a[data-ui='badge']:hover {
+    filter: brightness(1.01);
+  }
+  [data-ui='badge'][data-interactive='true']:active,
+  button[data-ui='badge']:active,
+  a[data-ui='badge']:active {
+    filter: brightness(0.99);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-ui='badge'][data-interactive='true'],
+    button[data-ui='badge'],
+    a[data-ui='badge'] {
+      transition: none;
+    }
+  }
+  /* Disabled state — dim + no soften; supports native and ARIA patterns */
+  [data-ui='badge'][aria-disabled='true'],
+  button[data-ui='badge'][disabled],
+  a[data-ui='badge'][aria-disabled='true'] {
+    opacity: 0.55;
+    filter: none !important;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}

package/styles/base.css

@@ -0,0 +1,7 @@
+@import './button.css';
+@import './card.css';
+@import './field.css';
+@import './pad.css';
+@import './pill.css';
+@import './toast.css';
+@import './badge.css';

package/styles/button.css

@@ -0,0 +1,257 @@
+/* ─────────────────────────────────────────────────────────────
+   Garden UI — Button skin (opt‑in)
+   Whisper: "press should feel like choosing, not forcing." 🌬️
+
+   Purpose
+     • Selector-only skin for the headless Button primitive.
+     • Uses Garden tokens; no hardcoded hex.
+
+   Data API
+     • [data-ui='button']              — root
+     • [data-variant='solid|outline|ghost|subtle']
+     • [data-tone='default|accent|positive|warning|danger']
+     • [data-density='snug|cozy']      — spacing/size
+     • [data-state='idle|loading|disabled'] (plus [disabled])
+     • [data-loading-mode='inline|blocking'] when loading
+     • [data-slot='icon leading|icon trailing|spinner|overlay'] for adornments, progress & blocking
+
+   A11y & Motion
+     • Focus-visible ring uses --ring-accent (fallback mixes accent against white).
+     • Hover lift is tiny (0.5px); no animations here, so reduced motion is implicit.
+     • Controls remain tabbable and legible across light/dark themes.
+     • Icon slots are presentational; TS marks them aria-hidden so screen readers read the label once.
+
+   Theming notes
+     • Surface/background: --color-elev; text: --color-text; borders: --color-border.
+     • Accents: --color-accent|positive|warning|danger; on-accent: --color-on-accent.
+     • Radius uses --radius-pill.
+
+   Future ideas
+     • Roomy density; progress stripe for loading; pressed-depth tokens.
+   ──────────────────────────────────────────────────────────── */
+
+@layer components {
+  /* Base */
+  [data-ui='button'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    border-radius: var(--radius-pill);
+    border: 1px solid var(--color-border);
+    font-weight: 500;
+    line-height: 1;
+    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
+    -webkit-tap-highlight-color: transparent;
+    cursor: pointer;
+  }
+
+  /* Density */
+  [data-ui='button'][data-density='snug'] {
+    padding: 0.375rem 0.75rem;
+    font-size: var(--text-sm);
+  }
+  [data-ui='button'][data-density='cozy'] {
+    padding: 0.5rem 0.875rem;
+    font-size: var(--text-sm);
+  }
+
+  /* Parts */
+  [data-ui='button'] [data-slot~='icon'] {
+    display: inline-flex;
+  }
+  [data-ui='button'] [data-slot='icon leading'] {
+    margin-inline-end: 0.25rem;
+  }
+  [data-ui='button'] [data-slot='icon trailing'] {
+    margin-inline-start: 0.25rem;
+  }
+
+  /* Tone → focus ring color variable (used by :focus-visible) */
+  [data-ui='button'][data-tone='default'] { --ring-accent: color-mix(in oklab, var(--color-text) 80%, white 20%); }
+  [data-ui='button'][data-tone='accent']  { --ring-accent: color-mix(in oklab, var(--color-accent) 85%, white 15%); }
+  [data-ui='button'][data-tone='positive']{ --ring-accent: color-mix(in oklab, var(--color-positive) 85%, white 15%); }
+  [data-ui='button'][data-tone='warning'] { --ring-accent: color-mix(in oklab, var(--color-warning) 85%, white 15%); }
+  [data-ui='button'][data-tone='danger']  { --ring-accent: color-mix(in oklab, var(--color-danger) 85%, white 15%); }
+
+  /* Spinner — inline, token-aware, respects reduced motion */
+  [data-ui='button'] [data-slot='spinner'] {
+    display: inline-block;
+    width: 0.875rem; /* 14px */
+    height: 0.875rem; /* 14px */
+    box-sizing: border-box; /* ensures width/height include border (fixes box-model lint) */
+    margin-inline-start: 0.25rem;
+    border-radius: 9999px;
+    border: 2px solid currentColor;
+    border-top-color: transparent; /* creates the arc */
+    animation: ui-spin var(--duration-snug, 0.9s) linear infinite;
+  }
+
+  @keyframes ui-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-ui='button'] [data-slot='spinner'] {
+      animation: none;
+      /* show a static dot when motion is reduced */
+      border-color: currentColor;
+      border-top-color: currentColor;
+      opacity: 0.8;
+    }
+  }
+
+  /* Blocking overlay — covers the button and centers a spinner */
+  [data-ui='button'][data-loading-mode='blocking'] {
+    position: relative; /* create containing block for overlay */
+  }
+  [data-ui='button'][data-loading-mode='blocking'] [data-slot='overlay'] {
+    position: absolute;
+    inset: -1px; /* cover border too */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: inherit;
+    pointer-events: none; /* overlay does not steal clicks */
+    /* Gentle dim across variants (token-mixed) */
+    background: var(--button-overlay-dim, color-mix(in oklab, var(--color-elev) 82%, var(--color-text) 18%));
+  }
+  [data-ui='button'][data-loading-mode='blocking'] [data-slot='overlay'] [data-slot='spinner'] {
+    width: 1rem; /* 16px */
+    height: 1rem; /* 16px */
+    box-sizing: border-box; /* ensures width/height include border (fixes box-model lint) */
+    margin: 0; /* centered, no extra gap */
+  }
+
+  /* Variants — SOLID (filled surface, on-accent text for non-default tones) */
+  [data-ui='button'][data-variant='solid'] {
+    border-color: transparent;
+    color: var(--color-on-accent);
+  }
+  [data-ui='button'][data-variant='solid'][data-tone='default'] {
+    background: var(--color-elev);
+    color: var(--color-text);
+    border-color: var(--color-border);
+  }
+  [data-ui='button'][data-variant='solid'][data-tone='accent'] {
+    background: var(--color-accent);
+  }
+  [data-ui='button'][data-variant='solid'][data-tone='positive'] {
+    background: var(--color-positive);
+  }
+  [data-ui='button'][data-variant='solid'][data-tone='warning'] {
+    background: var(--color-warning);
+    color: var(--color-on-accent);
+  }
+  [data-ui='button'][data-variant='solid'][data-tone='danger'] {
+    background: var(--color-danger);
+  }
+
+  /* Variants — OUTLINE (transparent fill, colored border/text) */
+  [data-ui='button'][data-variant='outline'] {
+    background: transparent;
+  }
+  [data-ui='button'][data-variant='outline'][data-tone='default'] {
+    color: var(--color-text);
+  }
+  [data-ui='button'][data-variant='outline'][data-tone='accent'] {
+    color: var(--color-accent);
+    border-color: var(--color-accent);
+  }
+  [data-ui='button'][data-variant='outline'][data-tone='positive'] {
+    color: var(--color-positive);
+    border-color: var(--color-positive);
+  }
+  [data-ui='button'][data-variant='outline'][data-tone='warning'] {
+    color: var(--color-warning);
+    border-color: var(--color-warning);
+  }
+  [data-ui='button'][data-variant='outline'][data-tone='danger'] {
+    color: var(--color-danger);
+    border-color: var(--color-danger);
+  }
+
+  /* Variants — GHOST (no border, transparent fill; subtle hover wash on tone) */
+  [data-ui='button'][data-variant='ghost'] {
+    background: transparent;
+    border-color: transparent;
+  }
+  [data-ui='button'][data-variant='ghost'][data-tone='default'] {
+    color: var(--color-text);
+  }
+  [data-ui='button'][data-variant='ghost'][data-tone='accent'] {
+    color: var(--color-accent);
+  }
+  [data-ui='button'][data-variant='ghost'][data-tone='positive'] {
+    color: var(--color-positive);
+  }
+  [data-ui='button'][data-variant='ghost'][data-tone='warning'] {
+    color: var(--color-warning);
+  }
+  [data-ui='button'][data-variant='ghost'][data-tone='danger'] {
+    color: var(--color-danger);
+  }
+
+  /* Variants — SUBTLE (neutral surface, gentle border; good for low-stakes actions) */
+  [data-ui='button'][data-variant='subtle'] {
+    background: var(--color-fill-subtle);
+    color: var(--color-text);
+    border-color: color-mix(in oklab, var(--color-text) 12%, transparent);
+  }
+
+  /* Hover — slight lift + color wash (whisper: "make intent feel light") */
+  @media (hover: hover) {
+    [data-ui='button']:not([disabled])[data-state='idle']:hover {
+      transform: translateY(-0.5px);
+    }
+    [data-ui='button'][data-variant='outline'][data-tone='accent']:hover {
+      background: color-mix(in oklab, var(--color-accent) 12%, transparent);
+    }
+    [data-ui='button'][data-variant='outline'][data-tone='positive']:hover {
+      background: color-mix(in oklab, var(--color-positive) 12%, transparent);
+    }
+    [data-ui='button'][data-variant='outline'][data-tone='warning']:hover {
+      background: color-mix(in oklab, var(--color-warning) 12%, transparent);
+    }
+    [data-ui='button'][data-variant='outline'][data-tone='danger']:hover {
+      background: color-mix(in oklab, var(--color-danger) 12%, transparent);
+    }
+    [data-ui='button'][data-variant='ghost'][data-tone='accent']:hover {
+      background: color-mix(in oklab, var(--color-accent) 10%, transparent);
+    }
+    [data-ui='button'][data-variant='ghost'][data-tone='positive']:hover {
+      background: color-mix(in oklab, var(--color-positive) 10%, transparent);
+    }
+    [data-ui='button'][data-variant='ghost'][data-tone='warning']:hover {
+      background: color-mix(in oklab, var(--color-warning) 10%, transparent);
+    }
+    [data-ui='button'][data-variant='ghost'][data-tone='danger']:hover {
+      background: color-mix(in oklab, var(--color-danger) 10%, transparent);
+    }
+  }
+
+  /* Active — cancel hover lift, add gentle press */
+  [data-ui='button']:not([disabled])[data-state='idle']:active {
+    transform: translateY(0);
+    filter: brightness(0.98);
+  }
+
+  /* Focus — :focus-visible ring uses --ring-accent (fallback blends accent for contrast) */
+  [data-ui='button']:focus-visible {
+    outline: 2px solid var(--ring-accent, color-mix(in oklab, var(--color-accent) 85%, white 15%));
+    outline-offset: 2px;
+  }
+
+  /* States — loading (progress), disabled (no pointer events to avoid double submits) */
+  [data-ui='button'][data-state='loading'] {
+    cursor: progress;
+  }
+  [data-ui='button'][data-state='disabled'],
+  [data-ui='button'][disabled] {
+    opacity: 0.6;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}

package/styles/card.css

@@ -0,0 +1,195 @@
+/* ─────────────────────────────────────────────────────────────
+   Garden UI — Card skin (opt‑in)
+   Whisper: "surfaces should invite, not insist." 🌬️
+
+   Purpose
+     • Selector-only skin for the headless Card primitive.
+     • Driven by Garden tokens; no hardcoded hex.
+
+   Data API
+     • [data-ui='card']                        — root
+     • [data-variant='plain|elev|glow|outline|inset|ghost']        — depth/outline semantics
+     • [data-padding='none|sm|md|lg']          — inner spacing
+     • [data-tone='subtle|accent|positive|warning|danger'] — ring/outline tone (optional)
+     • [data-depth='inherit|0|1|2|3']         — shadow depth passthrough
+
+   A11y
+     • Card is presentational by default; semantics come from the element you render.
+     • If interactive (link/button), ensure a visible focus style (see [data-interactive]).
+
+   Notes
+     • Base uses --color-elev with border + depth token; 'plain' swaps to --color-surface.
+     • 'glow' draws an accent outline using --ring-accent (with safe fallback).
+     • Keep motion subtle; any reveal/hover effects belong in the app layer.
+     • Tokens: --surface, --elev, --text, --border, --sheet-radius, --shadow-depth-*, --ring-accent (optional).
+   ──────────────────────────────────────────────────────────── */
+@layer components {
+  /* Base — tokenized surface, border, and depth */
+  [data-ui='card'] {
+    border-radius: var(--sheet-radius, var(--radius-2xl));
+    border: 1px solid var(--border);
+    background: var(--elev);
+    box-shadow: var(--shadow-depth-2, 0 6px 18px -6px rgb(0 0 0 / 0.2));
+    color: var(--text);
+    position: relative; /* allow ::before grain overlay */
+    isolation: isolate; /* keep overlays local */
+    overflow: clip; /* prevent bleed on rounded corners */
+  }
+
+  /* Variants — plain / elev / glow / outline / inset / ghost */
+  [data-ui='card'][data-variant='plain'] {
+    background: var(--surface);
+    box-shadow: none;
+  }
+
+  [data-ui='card'][data-variant='elev'] {
+    /* same as base; kept for clarity */
+  }
+
+  [data-ui='card'][data-variant='glow'] {
+    outline: 2px solid var(--ring-accent, color-mix(in oklab, var(--color-accent) 85%, white 15%));
+    outline-offset: 0;
+  }
+
+  /* outline — clear surface with crisp border, no shadow */
+  [data-ui='card'][data-variant='outline'] {
+    background: transparent;
+    border-color: color-mix(in oklab, var(--border) 75%, transparent);
+    box-shadow: none;
+  }
+
+  /* inset — “well” feel via subtle inner lines */
+  [data-ui='card'][data-variant='inset'] {
+    background: var(--surface);
+    /* remove outer depth, create a gentle inner well */
+    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), inset 0 -1px 0 rgb(0 0 0 / 0.08);
+  }
+
+  /* ghost — barely-there surface; awakens on hover/focus if interactive */
+  [data-ui='card'][data-variant='ghost'] {
+    background: transparent;
+    border-color: transparent;
+    box-shadow: none;
+  }
+  [data-ui='card'][data-variant='ghost'][data-interactive='true']:hover,
+  [data-ui='card'][data-variant='ghost'][data-interactive='true']:focus-visible {
+    background: color-mix(in oklab, var(--surface) 65%, transparent);
+    border-color: color-mix(in oklab, var(--border) 85%, transparent);
+    box-shadow: var(--shadow-depth-1, 0 4px 14px -6px rgb(0 0 0 / 0.22));
+  }
+
+  /* Ambient grain overlay — scales with --grain-strength (0..1)
+     Uses an inline SVG fractal noise tile; blended via multiply.
+     Disabled automatically when --grain-strength = 0.
+  */
+  [data-ui='card']::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    z-index: 0; /* behind content (before → content → after) */
+    opacity: clamp(0, var(--grain-strength, 0), 0.35);
+    /* size controlled by --grain-size (px), defaults to 140px */
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='1'/></svg>");
+    background-size: var(--grain-size, 140px) var(--grain-size, 140px);
+    background-repeat: repeat;
+    mix-blend-mode: multiply;
+    transition: opacity var(--duration-snug, 160ms) var(--ease-soft, ease);
+  }
+  /* Slight lift on hover for interactive cards */
+  [data-ui='card'][data-interactive='true']:hover::before,
+  [data-ui='card'][data-interactive='true']:focus-visible::before {
+    opacity: clamp(0, calc(var(--grain-strength, 0) * 1.15), 0.42);
+  }
+  /* Skip grain for ghost variant (transparent surface) */
+  [data-ui='card'][data-variant='ghost']::before {
+    opacity: 0 !important;
+  }
+  /* Also skip grain for outline variant (transparent surface) */
+  [data-ui='card'][data-variant='outline']::before {
+    opacity: 0 !important;
+  }
+
+  /* Padding scale — none | sm | md | lg */
+  [data-ui='card'][data-padding='none'] {
+    padding: 0;
+  }
+  [data-ui='card'][data-padding='sm'] {
+    padding: 0.75rem;
+  }
+  [data-ui='card'][data-padding='md'] {
+    padding: 1rem;
+  }
+  [data-ui='card'][data-padding='lg'] {
+    padding: 1.5rem;
+  }
+
+  /* Depth passthrough — opt-in shadow control (syncs with Pad depth) */
+  [data-ui='card']:not([data-variant='plain'])[data-depth='inherit'] {
+    /* Use container-provided depth variable when available */
+    box-shadow: var(--depth-shadow, var(--shadow-depth-2));
+  }
+  [data-ui='card']:not([data-variant='plain'])[data-depth='0'] {
+    box-shadow: var(--shadow-depth-0);
+  }
+  [data-ui='card']:not([data-variant='plain'])[data-depth='1'] {
+    box-shadow: var(--shadow-depth-1);
+  }
+  [data-ui='card']:not([data-variant='plain'])[data-depth='2'] {
+    box-shadow: var(--shadow-depth-2);
+  }
+  [data-ui='card']:not([data-variant='plain'])[data-depth='3'] {
+    box-shadow: var(--shadow-depth-3);
+  }
+
+  /* Tone → focus/outline ring color variable (used by :focus-visible & glow) */
+  [data-ui='card'][data-tone='subtle'] {
+    --ring-accent: color-mix(in oklab, var(--color-text) 80%, white 20%);
+  }
+  [data-ui='card'][data-tone='accent'] {
+    --ring-accent: color-mix(in oklab, var(--color-accent) 85%, white 15%);
+  }
+  [data-ui='card'][data-tone='positive'] {
+    --ring-accent: color-mix(in oklab, var(--color-positive) 85%, white 15%);
+  }
+  [data-ui='card'][data-tone='warning'] {
+    --ring-accent: color-mix(in oklab, var(--color-warning) 85%, white 15%);
+  }
+  [data-ui='card'][data-tone='danger'] {
+    --ring-accent: color-mix(in oklab, var(--color-danger) 85%, white 15%);
+  }
+
+  /* Optional: interactive hover/active soften (opt-in via data-interactive) */
+  [data-ui='card'][data-interactive='true'] {
+    transition: filter var(--duration-snug, 160ms) var(--ease-soft, ease), box-shadow var(--duration-snug, 160ms) var(--ease-soft, ease);
+  }
+  [data-ui='card'][data-interactive='true']:hover {
+    filter: brightness(1.02);
+  }
+  [data-ui='card'][data-interactive='true']:active {
+    filter: brightness(0.98);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-ui='card'][data-interactive='true'] {
+      transition: none;
+    }
+  }
+
+  /* Optional: interactive focus (opt-in via data-interactive) */
+  [data-ui='card'][data-interactive='true']:focus-visible {
+    outline: 2px solid var(--ring-accent, color-mix(in oklab, var(--color-accent) 85%, white 15%));
+    outline-offset: 2px;
+  }
+
+  /* Disabled — dim + block interaction (opt-in interactive only) */
+  [data-ui='card'][data-interactive='true'][aria-disabled='true'],
+  a[data-ui='card'][aria-disabled='true'],
+  button[data-ui='card'][disabled] {
+    opacity: 0.55;
+    filter: none !important;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}