/* ═══════════════════════════════════════════════════════════════════
   Opal — XSOPA Design System  |  v1.0
   Full compiled stylesheet. Import this + reference component
   snippets from /components/*.html
   ═══════════════════════════════════════════════════════════════════ */

    /* ─── Reset ─────────────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* ─── Tokens ─────────────────────────────────────────────────────── */
    :root {
      /* Brand */
      --color-crail:       #C15F3C;
      --color-crail-light: #d9815e;
      --color-crail-dark:  #9e4d2f;

      /* Surface / neutral */
      --color-pampas:      #F4F3EE;
      --color-cloudy:      #B1ADA1;
      --color-cloudy-dark: #8a8680;
      --color-white:       #FFFFFF;
      --color-ink:         #2c2a27;
      --color-ink-muted:   #5c5954;

      /* Semantic colors */
      --color-error:           #d94f4f;
      --color-error-light:     #f5a8a8;
      --color-error-dark:      #b03030;
      --color-error-surface:   rgba(217,79,79,.08);
      --color-success:         #4a9e5c;
      --color-success-light:   #9fd4a8;
      --color-success-dark:    #2d7a3d;
      --color-success-surface: rgba(74,158,92,.08);
      --color-warning:         #c9901a;
      --color-warning-light:   #f0c96a;
      --color-warning-dark:    #8a6500;
      --color-warning-surface: rgba(201,144,26,.08);
      --color-info:            var(--color-crail);
      --color-info-surface:    rgba(193,95,60,.07);

      /* Typography */
      --font-sans:   'Inter', 'Helvetica Neue', Arial, sans-serif;
      --font-mono:   'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

      --text-xs:   0.75rem;
      --text-sm:   0.875rem;
      --text-base: 1rem;
      --text-lg:   1.125rem;
      --text-xl:   1.25rem;
      --text-2xl:  1.5rem;
      --text-3xl:  1.875rem;
      --text-4xl:  2.25rem;
      --text-5xl:  3rem;

      --weight-regular:  400;
      --weight-medium:   500;
      --weight-semibold: 600;
      --weight-bold:     700;

      --leading-tight:   1.25;
      --leading-snug:    1.375;
      --leading-normal:  1.5;
      --leading-relaxed: 1.625;

      --tracking-tight:   -0.02em;
      --tracking-normal:   0em;
      --tracking-wide:     0.04em;
      --tracking-wider:    0.08em;
      --tracking-widest:   0.10em;

      /* Spacing */
      --space-1:  0.25rem;
      --space-2:  0.5rem;
      --space-3:  0.75rem;
      --space-4:  1rem;
      --space-5:  1.25rem;
      --space-6:  1.5rem;
      --space-8:  2rem;
      --space-10: 2.5rem;
      --space-12: 3rem;
      --space-16: 4rem;
      --space-20: 5rem;
      --space-24: 6rem;

      /* Border radius */
      --radius-none: 0;
      --radius-sm:   0.25rem;
      --radius-md:   0.5rem;
      --radius-lg:   0.75rem;
      --radius-xl:   1rem;
      --radius-2xl:  1.5rem;
      --radius-full: 9999px;

      /* Shadows */
      --shadow-sm:  0 1px 2px rgba(44,42,39,.06), 0 1px 3px rgba(44,42,39,.1);
      --shadow-md:  0 4px 6px rgba(44,42,39,.07), 0 2px 4px rgba(44,42,39,.06);
      --shadow-lg:  0 10px 15px rgba(44,42,39,.1), 0 4px 6px rgba(44,42,39,.05);

      /* Duration */
      --duration-instant: 80ms;
      --duration-fast:    120ms;
      --duration-base:    200ms;
      --duration-slow:    360ms;
      --duration-slower:  500ms;

      /* Easing */
      --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
      --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
      --ease-in-out:     cubic-bezier(0.76, 0, 0.24, 1);
      --ease-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0);
      --ease-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
      --transition:      180ms ease;

      /* State layers */
      --state-hover:   0.08;
      --state-pressed: 0.12;
      --state-focused: 0.12;
      --state-dragged: 0.16;

      --sidebar-w: 256px;
    }

    /* ─── Dark mode ──────────────────────────────────────────────────── */
    @media (prefers-color-scheme: dark) {
      :root {
        --color-pampas:      #1c1a17;
        --color-white:       #252320;
        --color-ink:         #e8e4da;
        --color-ink-muted:   #a8a49c;
        --color-cloudy:      #4a4744;
        --color-cloudy-dark: #6e6b66;
        --shadow-sm: 0 1px 2px rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.35);
        --shadow-md: 0 4px 6px rgba(0,0,0,.30), 0 2px 4px rgba(0,0,0,.25);
        --shadow-lg: 0 10px 15px rgba(0,0,0,.40), 0 4px 6px rgba(0,0,0,.25);
        --color-error-surface:   rgba(217,79,79,.15);
        --color-success-surface: rgba(74,158,92,.15);
        --color-warning-surface: rgba(201,144,26,.15);
        --color-info-surface:    rgba(193,95,60,.15);
      }
    }

    /* ─── Reduced motion ─────────────────────────────────────────────── */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration:        0.01ms !important;
        animation-iteration-count: 1      !important;
        transition-duration:       0.01ms !important;
        scroll-behavior:           auto   !important;
      }
    }

    /* ─── Base ───────────────────────────────────────────────────────── */
    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font-sans);
      font-size: var(--text-base);
      line-height: var(--leading-normal);
      color: var(--color-ink);
      background: var(--color-pampas);
    }

    /* ─── Layout ─────────────────────────────────────────────────────── */
    .layout { display: flex; min-height: 100vh; }

    /* ─── Sidebar ────────────────────────────────────────────────────── */
    .sidebar {
      position: fixed;
      top: 0; left: 0;
      width: var(--sidebar-w);
      height: 100vh;
      background: var(--color-white);
      border-right: 1px solid rgba(177,173,161,.3);
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      z-index: 100;
    }

    .sidebar-logo {
      padding: var(--space-6) var(--space-6) var(--space-4);
      border-bottom: 1px solid rgba(177,173,161,.2);
    }

    .sidebar-logo .wordmark {
      font-size: var(--text-lg);
      font-weight: var(--weight-bold);
      color: var(--color-ink);
      letter-spacing: -.02em;
      display: block;
    }

    .sidebar-logo .version {
      font-size: var(--text-xs);
      color: var(--color-cloudy);
      margin-top: var(--space-1);
      font-weight: var(--weight-medium);
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .sidebar-section {
      padding: var(--space-6) 0 var(--space-2);
    }

    .sidebar-section-label {
      font-size: var(--text-xs);
      font-weight: var(--weight-semibold);
      color: var(--color-cloudy);
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: 0 var(--space-6) var(--space-2);
    }

    .sidebar-link {
      display: block;
      padding: var(--space-2) var(--space-6);
      font-size: var(--text-sm);
      font-weight: var(--weight-medium);
      color: var(--color-ink-muted);
      text-decoration: none;
      border-left: 2px solid transparent;
      transition: color var(--transition), border-color var(--transition), background var(--transition);
    }

    .sidebar-link:hover {
      color: var(--color-ink);
      background: rgba(177,173,161,.1);
    }

    .sidebar-link.active {
      color: var(--color-crail);
      border-left-color: var(--color-crail);
      background: rgba(193,95,60,.06);
    }

    /* ─── Main content ───────────────────────────────────────────────── */
    .main {
      margin-left: var(--sidebar-w);
      flex: 1;
      min-width: 0;
    }

    /* ─── Topbar ─────────────────────────────────────────────────────── */
    .topbar {
      position: sticky; top: 0;
      background: rgba(244,243,238,.92);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid rgba(177,173,161,.25);
      padding: var(--space-4) var(--space-10);
      display: flex;
      align-items: center;
      gap: var(--space-4);
      z-index: 50;
    }

    .topbar-breadcrumb {
      font-size: var(--text-sm);
      color: var(--color-cloudy);
    }

    .topbar-breadcrumb span { color: var(--color-ink); font-weight: var(--weight-medium); }

    /* ─── Content ────────────────────────────────────────────────────── */
    .content {
      max-width: 800px;
      margin: 0 auto;
      padding: var(--space-16) var(--space-10);
    }

    /* ─── Sections ───────────────────────────────────────────────────── */
    .section { margin-bottom: var(--space-20); }

    .section-eyebrow {
      font-size: var(--text-xs);
      font-weight: var(--weight-semibold);
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--color-crail);
      margin-bottom: var(--space-3);
    }

    .section-title {
      font-size: var(--text-4xl);
      font-weight: var(--weight-bold);
      color: var(--color-ink);
      letter-spacing: -.03em;
      line-height: var(--leading-tight);
      margin-bottom: var(--space-4);
    }

    .section-lead {
      font-size: var(--text-lg);
      color: var(--color-ink-muted);
      line-height: var(--leading-relaxed);
      max-width: 60ch;
      margin-bottom: var(--space-10);
    }

    .subsection { margin-bottom: var(--space-12); }

    .subsection-title {
      font-size: var(--text-xl);
      font-weight: var(--weight-semibold);
      color: var(--color-ink);
      letter-spacing: -.02em;
      margin-bottom: var(--space-2);
    }

    .subsection-desc {
      font-size: var(--text-sm);
      color: var(--color-ink-muted);
      line-height: var(--leading-relaxed);
      margin-bottom: var(--space-5);
    }

    /* ─── Divider ────────────────────────────────────────────────────── */
    .divider {
      border: none;
      border-top: 1px solid rgba(177,173,161,.3);
      margin: var(--space-16) 0;
    }

    /* ─── Color palette ──────────────────────────────────────────────── */
    .color-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: var(--space-4);
    }

    .color-card {
      border-radius: var(--radius-lg);
      overflow: hidden;
      border: 1px solid rgba(177,173,161,.25);
      box-shadow: var(--shadow-sm);
    }

    .color-swatch {
      height: 100px;
    }

    .color-meta {
      background: var(--color-white);
      padding: var(--space-4);
    }

    .color-name {
      font-size: var(--text-sm);
      font-weight: var(--weight-semibold);
      color: var(--color-ink);
      margin-bottom: var(--space-1);
    }

    .color-hex {
      font-size: var(--text-xs);
      font-family: var(--font-mono);
      color: var(--color-cloudy-dark);
    }

    .color-rgb {
      font-size: var(--text-xs);
      font-family: var(--font-mono);
      color: var(--color-cloudy);
    }

    /* ─── Usage tags ─────────────────────────────────────────────────── */
    .usage-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

    .tag {
      display: inline-flex;
      align-items: center;
      height: 22px;
      padding: 0 var(--space-3);
      border-radius: var(--radius-full);
      font-size: var(--text-xs);
      font-weight: var(--weight-medium);
      background: rgba(177,173,161,.18);
      color: var(--color-ink-muted);
    }

    .tag-primary { background: rgba(193,95,60,.12); color: var(--color-crail-dark); }

    /* ─── Do / Don't ─────────────────────────────────────────────────── */
    .do-dont {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-4);
      margin: var(--space-6) 0;
    }

    .do-box, .dont-box {
      border-radius: var(--radius-lg);
      padding: var(--space-5);
      font-size: var(--text-sm);
      line-height: var(--leading-relaxed);
    }

    .do-box {
      background: rgba(193,95,60,.06);
      border: 1px solid rgba(193,95,60,.2);
      border-top: 3px solid var(--color-crail);
    }

    .dont-box {
      background: rgba(177,173,161,.1);
      border: 1px solid rgba(177,173,161,.3);
      border-top: 3px solid var(--color-cloudy);
    }

    .do-label, .dont-label {
      font-size: var(--text-xs);
      font-weight: var(--weight-bold);
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: var(--space-2);
    }

    .do-label { color: var(--color-crail); }
    .dont-label { color: var(--color-cloudy-dark); }

    /* ─── Typography specimens ───────────────────────────────────────── */
    .type-scale { display: flex; flex-direction: column; gap: var(--space-4); }

    .type-row {
      display: flex;
      align-items: baseline;
      gap: var(--space-6);
      padding: var(--space-5) 0;
      border-bottom: 1px solid rgba(177,173,161,.2);
    }

    .type-meta {
      min-width: 110px;
      text-align: right;
    }

    .type-label {
      font-size: var(--text-xs);
      font-weight: var(--weight-semibold);
      color: var(--color-cloudy-dark);
    }

    .type-detail {
      font-size: var(--text-xs);
      font-family: var(--font-mono);
      color: var(--color-cloudy);
    }

    /* ─── Spacing scale ──────────────────────────────────────────────── */
    .space-scale { display: flex; flex-direction: column; gap: var(--space-3); }

    .space-row {
      display: flex;
      align-items: center;
      gap: var(--space-5);
    }

    .space-bar-wrap { flex: 1; }

    .space-bar {
      height: 24px;
      background: var(--color-crail);
      border-radius: var(--radius-sm);
      opacity: .8;
    }

    .space-info {
      min-width: 120px;
      display: flex;
      flex-direction: column;
    }

    .space-token {
      font-size: var(--text-xs);
      font-family: var(--font-mono);
      font-weight: var(--weight-semibold);
      color: var(--color-ink);
    }

    .space-value {
      font-size: var(--text-xs);
      font-family: var(--font-mono);
      color: var(--color-cloudy-dark);
    }

    /* ─── Border radius ──────────────────────────────────────────────── */
    .radius-grid {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-5);
    }

    .radius-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-3);
    }

    .radius-box {
      width: 72px; height: 72px;
      background: var(--color-crail);
      opacity: .8;
    }

    .radius-label {
      font-size: var(--text-xs);
      font-family: var(--font-mono);
      color: var(--color-ink-muted);
      text-align: center;
    }

    /* ─── Shadow scale ───────────────────────────────────────────────── */
    .shadow-grid {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-6);
    }

    .shadow-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-4);
    }

    .shadow-box {
      width: 80px; height: 80px;
      border-radius: var(--radius-md);
      background: var(--color-white);
    }

    .shadow-label {
      font-size: var(--text-xs);
      font-family: var(--font-mono);
      color: var(--color-ink-muted);
    }

    /* ─── Component previews ─────────────────────────────────────────── */
    .preview-surface {
      background: var(--color-white);
      border: 1px solid rgba(177,173,161,.25);
      border-radius: var(--radius-xl);
      padding: var(--space-8);
      margin-bottom: var(--space-4);
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-4);
      align-items: center;
    }

    /* ─── Buttons ────────────────────────────────────────────────────── */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      border: none;
      cursor: pointer;
      font-family: inherit;
      font-weight: var(--weight-medium);
      transition:
        transform  240ms var(--ease-spring),
        box-shadow 200ms var(--ease-out),
        background 150ms ease,
        border-color 150ms ease,
        color 150ms ease;
      will-change: transform;
      white-space: nowrap;
    }

    /* Sizes */
    .btn-sm  { height: 32px; padding: 0 var(--space-4); font-size: var(--text-sm); border-radius: var(--radius-md); }
    .btn-md  { height: 40px; padding: 0 var(--space-5); font-size: var(--text-sm); border-radius: var(--radius-md); }
    .btn-lg  { height: 48px; padding: 0 var(--space-6); font-size: var(--text-base); border-radius: var(--radius-lg); }

    /* Variants */
    .btn-primary {
      background: var(--color-crail);
      color: var(--color-white);
    }
    .btn-primary:hover {
      background: var(--color-crail-dark);
      box-shadow: 0 6px 20px rgba(193,95,60,.32);
      transform: translateY(-2px);
    }
    .btn-primary:active { transform: scale(0.96) translateY(0); box-shadow: var(--shadow-sm); }

    .btn-secondary {
      background: var(--color-pampas);
      color: var(--color-ink);
      border: 1px solid rgba(177,173,161,.4);
    }
    .btn-secondary:hover  { background: var(--color-white); border-color: var(--color-cloudy); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
    .btn-secondary:active { transform: scale(0.97); box-shadow: none; }

    .btn-ghost {
      background: transparent;
      color: var(--color-ink-muted);
    }
    .btn-ghost:hover  { background: rgba(177,173,161,.15); color: var(--color-ink); transform: translateY(-1px); }
    .btn-ghost:active { transform: scale(0.97); }

    .btn-outline {
      background: transparent;
      color: var(--color-crail);
      border: 1.5px solid var(--color-crail);
    }
    .btn-outline:hover  { background: rgba(193,95,60,.08); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(193,95,60,.15); }
    .btn-outline:active { transform: scale(0.97); box-shadow: none; }

    .btn:disabled {
      opacity: .4;
      cursor: not-allowed;
      transform: none !important;
      box-shadow: none !important;
    }

    /* ─── Inputs ─────────────────────────────────────────────────────── */
    .input-group { display: flex; flex-direction: column; gap: var(--space-2); }

    .input-label {
      font-size: var(--text-sm);
      font-weight: var(--weight-medium);
      color: var(--color-ink);
    }

    .input-hint {
      font-size: var(--text-xs);
      color: var(--color-cloudy-dark);
    }

    .input {
      width: 100%;
      height: 40px;
      padding: 0 var(--space-4);
      font-family: inherit;
      font-size: var(--text-sm);
      color: var(--color-ink);
      background: var(--color-white);
      border: 1.5px solid rgba(177,173,161,.5);
      border-radius: var(--radius-md);
      outline: none;
      transition: border-color var(--transition), box-shadow var(--transition);
    }

    .input::placeholder { color: var(--color-cloudy); }

    .input:focus-visible {
      border-color: var(--color-crail);
      box-shadow: 0 0 0 3px rgba(193,95,60,.15);
    }

    .input-error {
      border-color: #d94f4f;
    }

    .input-error-msg {
      font-size: var(--text-xs);
      color: #c23b3b;
    }

    .textarea {
      width: 100%;
      padding: var(--space-3) var(--space-4);
      font-family: inherit;
      font-size: var(--text-sm);
      color: var(--color-ink);
      background: var(--color-white);
      border: 1.5px solid rgba(177,173,161,.5);
      border-radius: var(--radius-md);
      outline: none;
      resize: vertical;
      min-height: 96px;
      transition: border-color var(--transition), box-shadow var(--transition);
    }

    .textarea:focus-visible {
      border-color: var(--color-crail);
      box-shadow: 0 0 0 3px rgba(193,95,60,.15);
    }

    /* ─── Cards ──────────────────────────────────────────────────────── */
    .card {
      background: var(--color-white);
      border: 1px solid rgba(177,173,161,.25);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-sm);
    }

    .card-header { padding: var(--space-5) var(--space-6); border-bottom: 1px solid rgba(177,173,161,.2); }
    .card-body   { padding: var(--space-6); }
    .card-footer { padding: var(--space-4) var(--space-6); border-top: 1px solid rgba(177,173,161,.2); background: rgba(177,173,161,.05); border-radius: 0 0 var(--radius-xl) var(--radius-xl); }

    .card-title {
      font-size: var(--text-base);
      font-weight: var(--weight-semibold);
      color: var(--color-ink);
    }

    .card-subtitle {
      font-size: var(--text-sm);
      color: var(--color-cloudy-dark);
      margin-top: var(--space-1);
    }

    /* ─── Badges ─────────────────────────────────────────────────────── */
    .badge {
      display: inline-flex;
      align-items: center;
      height: 20px;
      padding: 0 var(--space-2);
      border-radius: var(--radius-full);
      font-size: 11px;
      font-weight: var(--weight-semibold);
    }

    .badge-primary { background: rgba(193,95,60,.15); color: var(--color-crail-dark); }
    .badge-neutral { background: rgba(177,173,161,.25); color: var(--color-ink-muted); }
    .badge-success { background: rgba(80,160,90,.15); color: #2d7d3a; }
    .badge-warning { background: rgba(210,160,30,.15); color: #8a6500; }

    /* ─── Alert ──────────────────────────────────────────────────────── */
    .alert {
      border-radius: var(--radius-lg);
      padding: var(--space-4) var(--space-5);
      font-size: var(--text-sm);
      border-left: 3px solid;
      margin-bottom: var(--space-3);
    }

    .alert-title { font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }

    .alert-info    { background: var(--color-info-surface);    border-color: var(--color-info);    color: var(--color-ink-muted); }
    .alert-neutral { background: rgba(177,173,161,.12);        border-color: var(--color-cloudy);  color: var(--color-ink-muted); }
    .alert-success { background: var(--color-success-surface); border-color: var(--color-success); color: var(--color-ink-muted); }
    .alert-warning { background: var(--color-warning-surface); border-color: var(--color-warning); color: var(--color-ink-muted); }
    .alert-error   { background: var(--color-error-surface);   border-color: var(--color-error);   color: var(--color-ink-muted); }

    /* ─── Avatar ─────────────────────────────────────────────────────── */
    .avatar {
      border-radius: var(--radius-full);
      object-fit: cover;
      background: var(--color-crail);
      color: var(--color-white);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: var(--weight-semibold);
      flex-shrink: 0;
    }

    .avatar-sm  { width: 32px; height: 32px; font-size: var(--text-xs); }
    .avatar-md  { width: 40px; height: 40px; font-size: var(--text-sm); }
    .avatar-lg  { width: 56px; height: 56px; font-size: var(--text-lg); }

    /* ─── Code block ─────────────────────────────────────────────────── */
    .code-block {
      background: var(--color-ink);
      color: #e8e4da;
      border-radius: var(--radius-lg);
      padding: var(--space-5) var(--space-6);
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      overflow-x: auto;
      line-height: 1.7;
      margin: var(--space-5) 0;
    }

    .code-inline {
      font-family: var(--font-mono);
      font-size: .875em;
      background: rgba(193,95,60,.1);
      color: var(--color-crail-dark);
      padding: .1em .35em;
      border-radius: var(--radius-sm);
    }

    .code-comment { color: #8a8070; }
    .code-key     { color: #e8a97c; }
    .code-value   { color: #aacfa0; }
    .code-string  { color: #aacfa0; }

    /* ─── Tokens table ───────────────────────────────────────────────── */
    .token-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }

    .token-table th {
      text-align: left;
      font-size: var(--text-xs);
      font-weight: var(--weight-semibold);
      color: var(--color-cloudy-dark);
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: var(--space-2) var(--space-4);
      background: rgba(177,173,161,.1);
      border-bottom: 1px solid rgba(177,173,161,.2);
    }

    .token-table td {
      padding: var(--space-3) var(--space-4);
      border-bottom: 1px solid rgba(177,173,161,.15);
      vertical-align: middle;
    }

    .token-table tr:last-child td { border-bottom: none; }

    .token-table tr:hover td { background: rgba(177,173,161,.07); }

    .token-swatch {
      width: 20px; height: 20px;
      border-radius: var(--radius-sm);
      display: inline-block;
      vertical-align: middle;
      border: 1px solid rgba(0,0,0,.08);
      margin-right: var(--space-2);
    }

    /* ─── Hero ───────────────────────────────────────────────────────── */
    .hero {
      padding: var(--space-20) 0 var(--space-16);
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      background: rgba(193,95,60,.1);
      color: var(--color-crail);
      border-radius: var(--radius-full);
      font-size: var(--text-xs);
      font-weight: var(--weight-semibold);
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: var(--space-1) var(--space-4);
      margin-bottom: var(--space-6);
    }

    .hero-dot {
      width: 6px; height: 6px;
      border-radius: var(--radius-full);
      background: var(--color-crail);
      animation: pulseDot 2.2s var(--ease-in-out) infinite;
    }

    .hero-title {
      font-size: clamp(2.25rem, 5vw, 3.5rem);
      font-weight: var(--weight-bold);
      color: var(--color-ink);
      letter-spacing: -.04em;
      line-height: 1.1;
      margin-bottom: var(--space-6);
    }

    .hero-title em {
      font-style: normal;
      color: var(--color-crail);
    }

    .hero-desc {
      font-size: var(--text-xl);
      color: var(--color-ink-muted);
      line-height: var(--leading-relaxed);
      max-width: 55ch;
      margin-bottom: var(--space-8);
    }

    .hero-chips {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-3);
    }

    .hero-chip {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-2) var(--space-4);
      background: var(--color-white);
      border: 1px solid rgba(177,173,161,.3);
      border-radius: var(--radius-full);
      font-size: var(--text-sm);
      color: var(--color-ink-muted);
      font-weight: var(--weight-medium);
    }

    .hero-chip-dot {
      width: 8px; height: 8px;
      border-radius: var(--radius-full);
    }

    /* ─── Grid cards for overview ────────────────────────────────────── */
    .overview-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: var(--space-4);
      margin-top: var(--space-8);
    }

    .overview-card {
      background: var(--color-white);
      border: 1px solid rgba(177,173,161,.25);
      border-radius: var(--radius-xl);
      padding: var(--space-6);
      text-decoration: none;
      color: inherit;
      transition:
        transform  300ms var(--ease-spring),
        box-shadow 220ms var(--ease-out),
        border-color 150ms ease;
      will-change: transform;
      box-shadow: var(--shadow-sm);
    }

    .overview-card:hover {
      border-color: var(--color-crail);
      box-shadow: 0 8px 28px rgba(193,95,60,.16);
      transform: translateY(-5px);
    }

    .overview-card:active {
      transform: translateY(-1px) scale(0.98);
      box-shadow: var(--shadow-sm);
    }

    .overview-card:hover .overview-icon {
      background: rgba(193,95,60,.18);
      transform: scale(1.1) rotate(-4deg);
    }

    .overview-icon {
      width: 40px; height: 40px;
      border-radius: var(--radius-md);
      background: rgba(193,95,60,.1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
      margin-bottom: var(--space-4);
      transition: background 200ms ease, transform 300ms var(--ease-spring);
      color: var(--color-crail);
    }

    .overview-icon svg { width: 20px; height: 20px; }

    .overview-card-title {
      font-size: var(--text-base);
      font-weight: var(--weight-semibold);
      color: var(--color-ink);
      margin-bottom: var(--space-1);
    }

    .overview-card-desc {
      font-size: var(--text-sm);
      color: var(--color-ink-muted);
      line-height: var(--leading-relaxed);
    }

    /* ─── Accordion / collapsible ────────────────────────────────────── */
    details {
      border: 1px solid rgba(177,173,161,.25);
      border-radius: var(--radius-lg);
      margin-bottom: var(--space-3);
      overflow: hidden;
    }

    details summary {
      padding: var(--space-4) var(--space-5);
      font-weight: var(--weight-medium);
      font-size: var(--text-sm);
      cursor: pointer;
      list-style: none;
      background: var(--color-white);
      display: flex;
      justify-content: space-between;
      align-items: center;
      user-select: none;
    }

    details summary::-webkit-details-marker { display: none; }

    details summary::after {
      content: '+';
      font-size: var(--text-lg);
      color: var(--color-cloudy);
      transition: transform var(--transition);
    }

    details[open] summary::after {
      content: '−';
    }

    details .details-body {
      padding: var(--space-5);
      background: rgba(177,173,161,.06);
      border-top: 1px solid rgba(177,173,161,.2);
      font-size: var(--text-sm);
      color: var(--color-ink-muted);
      line-height: var(--leading-relaxed);
    }

    /* ─── Progress ───────────────────────────────────────────────────── */
    .progress-wrap {
      height: 8px;
      background: rgba(177,173,161,.2);
      border-radius: var(--radius-full);
      overflow: hidden;
      margin-bottom: var(--space-2);
    }

    .progress-bar {
      height: 100%;
      border-radius: var(--radius-full);
      background-image: linear-gradient(
        90deg,
        var(--color-crail)      0%,
        var(--color-crail-light) 50%,
        var(--color-crail)      100%
      );
      background-size: 200% 100%;
      animation: shimmer 2.4s ease infinite;
    }

    /* ─── Toggle / Switch ────────────────────────────────────────────── */
    .toggle-wrap {
      display: flex;
      align-items: center;
      gap: var(--space-3);
    }

    .toggle {
      position: relative;
      width: 44px; height: 24px;
      flex-shrink: 0;
    }

    .toggle input { opacity: 0; width: 0; height: 0; }

    .toggle-track {
      position: absolute;
      inset: 0;
      background: rgba(177,173,161,.4);
      border-radius: var(--radius-full);
      cursor: pointer;
      transition: background var(--transition);
    }

    .toggle-thumb {
      position: absolute;
      left: 3px; top: 3px;
      width: 18px; height: 18px;
      background: var(--color-white);
      border-radius: var(--radius-full);
      box-shadow: var(--shadow-sm);
      transition: transform 320ms var(--ease-spring);
      pointer-events: none;
    }

    .toggle input:checked + .toggle-track { background: var(--color-crail); }
    .toggle input:checked ~ .toggle-thumb { transform: translateX(20px); }

    .toggle-label { font-size: var(--text-sm); color: var(--color-ink); font-weight: var(--weight-medium); }

    /* ─── Icon system ────────────────────────────────────────────────── */
    .icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .icon svg { display: block; }
    .icon-16 svg { width: 16px; height: 16px; }
    .icon-20 svg { width: 20px; height: 20px; }
    .icon-24 svg { width: 24px; height: 24px; }
    .icon-32 svg { width: 32px; height: 32px; }

    .icon-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
      gap: var(--space-2);
    }

    .icon-tile {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-4) var(--space-2);
      border-radius: var(--radius-md);
      cursor: default;
      transition: background 150ms ease, transform 220ms var(--ease-spring);
    }
    .icon-tile:hover {
      background: rgba(193,95,60,.07);
      transform: translateY(-2px);
    }
    .icon-tile svg {
      width: 22px; height: 22px;
      color: var(--color-ink-muted);
      transition: color 150ms ease;
    }
    .icon-tile:hover svg { color: var(--color-crail); }

    .icon-tile-name {
      font-size: 9.5px;
      font-family: var(--font-mono);
      color: var(--color-cloudy-dark);
      text-align: center;
      line-height: 1.3;
      word-break: break-all;
    }

    .icon-size-row {
      display: flex;
      align-items: center;
      gap: var(--space-8);
    }
    .icon-size-demo {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-3);
    }
    .icon-size-label {
      font-size: var(--text-xs);
      font-family: var(--font-mono);
      color: var(--color-cloudy-dark);
    }

    /* ─── Tooltip demo ───────────────────────────────────────────────── */
    .tooltip-wrap {
      position: relative;
      display: inline-flex;
    }

    .tooltip {
      position: absolute;
      bottom: calc(100% + 6px);
      left: 50%;
      transform: translateX(-50%) translateY(4px) scale(0.92);
      transform-origin: bottom center;
      background: var(--color-ink);
      color: var(--color-white);
      font-size: var(--text-xs);
      padding: var(--space-1) var(--space-3);
      border-radius: var(--radius-md);
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transition:
        opacity 180ms var(--ease-out),
        transform 240ms var(--ease-spring);
    }

    .tooltip-wrap:hover .tooltip {
      opacity: 1;
      transform: translateX(-50%) translateY(0) scale(1);
    }

    .tooltip::after {
      content: '';
      position: absolute;
      top: 100%; left: 50%;
      transform: translateX(-50%);
      border: 5px solid transparent;
      border-top-color: var(--color-ink);
    }

    /* ─── Scrollbar ──────────────────────────────────────────────────── */
    .sidebar::-webkit-scrollbar { width: 4px; }
    .sidebar::-webkit-scrollbar-track { background: transparent; }
    .sidebar::-webkit-scrollbar-thumb { background: rgba(177,173,161,.4); border-radius: 2px; }

    /* ─── Keyframes ──────────────────────────────────────────────────── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(28px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes popIn {
      0%   { opacity: 0; transform: scale(0.82); }
      65%  { transform: scale(1.05); }
      100% { opacity: 1; transform: scale(1); }
    }

    @keyframes pulseDot {
      0%, 100% { transform: scale(1);   opacity: 1; }
      50%       { transform: scale(1.7); opacity: 0.45; }
    }

    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(-5px); }
    }

    @keyframes shimmer {
      from { background-position: -200% 0; }
      to   { background-position:  200% 0; }
    }

    @keyframes slideIndicator {
      from { transform: scaleY(0); opacity: 0; }
      to   { transform: scaleY(1); opacity: 1; }
    }

    /* Reveal on scroll (requires .js-loaded on <html>) */
    .js-loaded .section {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out);
    }
    .js-loaded .section.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Staggered overview card entrance */
    .js-loaded .overview-card {
      opacity: 0;
      transform: translateY(16px);
      animation: none;
    }
    .js-loaded .overview-card.visible {
      animation: fadeUp 480ms var(--ease-out) forwards;
    }

    /* ─── Micro-interactions ─────────────────────────────────────────── */

    /* Hero entrance sequence */
    @media (prefers-reduced-motion: no-preference) {
      .hero-badge { animation: fadeUp 500ms var(--ease-out)  50ms both; }
      .hero-title  { animation: fadeUp 580ms var(--ease-out) 160ms both; }
      .hero-desc   { animation: fadeUp 580ms var(--ease-out) 280ms both; }
      .hero-chips  { animation: fadeUp 500ms var(--ease-out) 400ms both; }
    }

    /* Hero em gradient shimmer */
    .hero-title em {
      background: linear-gradient(
        90deg,
        var(--color-crail) 0%,
        var(--color-crail-light) 40%,
        var(--color-crail) 100%
      );
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-style: normal;
      animation: shimmer 5s ease-in-out infinite;
    }

    /* Hero chips hover */
    .hero-chip {
      transition:
        transform    240ms var(--ease-spring),
        box-shadow   200ms ease,
        border-color 180ms ease;
    }
    .hero-chip:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-sm);
      border-color: rgba(193,95,60,.4);
    }

    /* Color cards */
    .color-card {
      transition:
        transform  280ms var(--ease-spring),
        box-shadow 220ms var(--ease-out);
      will-change: transform;
      cursor: default;
    }
    .color-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
    .color-swatch { transition: height 320ms var(--ease-out); }
    .color-card:hover .color-swatch { height: 120px; }

    /* Principle & content cards */
    .card {
      transition:
        transform  260ms var(--ease-spring),
        box-shadow 220ms var(--ease-out);
      will-change: transform;
    }
    .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

    /* Principle icon inside card */
    .principle-icon {
      width: 44px; height: 44px;
      border-radius: var(--radius-md);
      background: rgba(193,95,60,.08);
      display: flex; align-items: center; justify-content: center;
      color: var(--color-crail);
      margin-bottom: var(--space-4);
      transition: background 200ms ease, transform 300ms var(--ease-spring);
    }
    .card:hover .principle-icon {
      background: rgba(193,95,60,.16);
      transform: scale(1.06) rotate(-4deg);
    }

    /* Badges */
    .badge {
      transition: transform 200ms var(--ease-spring);
      cursor: default;
    }
    .badge:hover { transform: scale(1.1); }

    /* Avatars */
    .avatar {
      transition:
        transform  260ms var(--ease-spring),
        box-shadow 220ms ease;
    }
    .avatar:hover {
      transform: scale(1.1);
      box-shadow: 0 0 0 3px rgba(193,95,60,.2), 0 0 0 6px rgba(193,95,60,.07);
    }

    /* Shadow demo boxes */
    .shadow-box {
      transition: transform 280ms var(--ease-spring);
      cursor: default;
    }
    .shadow-item:hover .shadow-box { transform: translateY(-6px) scale(1.05); }

    /* Radius demo boxes */
    .radius-box {
      transition: transform 300ms var(--ease-spring), opacity 200ms ease;
    }
    .radius-item:hover .radius-box { transform: scale(1.12) rotate(-4deg); opacity: 1; }

    /* Type specimen rows */
    .type-row {
      transition: background 150ms ease, padding-left 220ms var(--ease-out);
      border-radius: var(--radius-sm);
    }
    .type-row:hover { background: rgba(193,95,60,.04); padding-left: var(--space-3); }

    /* Alert entrance */
    @keyframes slideInLeft {
      from { opacity: 0; transform: translateX(-10px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    .alert { animation: slideInLeft 320ms var(--ease-out) both; }
    .alert:nth-child(2) { animation-delay: 110ms; }

    /* Details body open */
    details[open] .details-body {
      animation: fadeUp 220ms var(--ease-out);
    }

    /* Code block scan shimmer */
    .code-block { position: relative; overflow: hidden; }
    .code-block::before {
      content: '';
      position: absolute;
      top: 0; left: -120px;
      width: 100px; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.03), transparent);
      animation: codeScan 8s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes codeScan {
      0%   { left: -120px; }
      100% { left: calc(100% + 120px); }
    }

    /* Topbar scroll state */
    .topbar { transition: background 200ms ease, box-shadow 200ms ease; }
    .topbar.scrolled { background: rgba(244,243,238,.98); box-shadow: var(--shadow-sm); }

    /* Section eyebrow animated underline */
    .section-eyebrow {
      position: relative;
      display: inline-block;
    }
    .section-eyebrow::after {
      content: '';
      position: absolute;
      bottom: -1px; left: 0;
      width: 0; height: 1.5px;
      background: var(--color-crail);
      border-radius: var(--radius-full);
      transition: width 500ms var(--ease-out) 80ms;
    }
    .section.visible .section-eyebrow::after { width: 100%; }

    /* Subsection hover underline */
    .subsection-title {
      position: relative;
      display: inline-block;
    }
    .subsection-title::after {
      content: '';
      position: absolute;
      bottom: -2px; left: 0;
      width: 0; height: 2px;
      background: rgba(193,95,60,.25);
      border-radius: var(--radius-full);
      transition: width 350ms var(--ease-out);
    }
    .subsection:hover .subsection-title::after { width: 100%; }

    /* Do/dont stagger entrance */
    .js-loaded .do-dont > * {
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 350ms var(--ease-out), transform 350ms var(--ease-out);
    }
    .js-loaded .do-dont.visible > *:nth-child(1) {
      opacity: 1; transform: none;
    }
    .js-loaded .do-dont.visible > *:nth-child(2) {
      opacity: 1; transform: none; transition-delay: 85ms;
    }

    /* Preview surfaces fade in */
    .js-loaded .preview-surface {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
    }
    .js-loaded .preview-surface.visible { opacity: 1; transform: none; }

    /* Dividers fade in */
    .divider {
      transition: opacity 500ms ease;
      opacity: 0;
    }
    .divider.visible { opacity: 1; }

    /* Token table row stagger */
    .js-loaded .token-table tbody tr {
      opacity: 0;
      transform: translateX(-6px);
      transition: opacity 220ms ease, transform 220ms var(--ease-out);
    }
    .js-loaded .token-table.visible tbody tr { opacity: 1; transform: none; }
    .js-loaded .token-table.visible tbody tr:nth-child(1) { transition-delay:   0ms; }
    .js-loaded .token-table.visible tbody tr:nth-child(2) { transition-delay:  35ms; }
    .js-loaded .token-table.visible tbody tr:nth-child(3) { transition-delay:  70ms; }
    .js-loaded .token-table.visible tbody tr:nth-child(4) { transition-delay: 105ms; }
    .js-loaded .token-table.visible tbody tr:nth-child(5) { transition-delay: 140ms; }
    .js-loaded .token-table.visible tbody tr:nth-child(6) { transition-delay: 175ms; }
    .js-loaded .token-table.visible tbody tr:nth-child(7) { transition-delay: 210ms; }
    .js-loaded .token-table.visible tbody tr:nth-child(8) { transition-delay: 245ms; }

    /* Space bars animate width on scroll */
    .js-loaded .space-bar {
      width: 0 !important;
      transition: width 700ms var(--ease-out);
    }
    .js-loaded .space-bar.visible { width: var(--bar-w) !important; }

    /* Sidebar logo and sections entrance */
    .sidebar-logo {
      animation: fadeUp 400ms var(--ease-out) 40ms both;
    }
    @keyframes fadeInSide {
      from { opacity: 0; transform: translateX(-8px); }
      to   { opacity: 1; transform: none; }
    }
    .sidebar-section { opacity: 0; animation: fadeInSide 380ms var(--ease-out) forwards; }
    .sidebar-section:nth-child(2) { animation-delay:  80ms; }
    .sidebar-section:nth-child(3) { animation-delay: 160ms; }
    .sidebar-section:nth-child(4) { animation-delay: 240ms; }
    .sidebar-section:nth-child(5) { animation-delay: 320ms; }

    /* Sidebar gem shimmer */
    @keyframes gemGlow {
      0%, 100% { filter: brightness(1)    saturate(1); }
      50%       { filter: brightness(1.18) saturate(1.15); }
    }
    .sidebar-gem { animation: gemGlow 5s ease-in-out infinite; display: block; }

    /* Topbar breadcrumb */
    .topbar-breadcrumb { animation: fadeUp 300ms var(--ease-out) 200ms both; }

    /* Input focus spring (override previous) */
    .input, .textarea {
      transition: border-color 180ms ease, box-shadow 280ms var(--ease-spring);
    }

    /* Token table smooth row hover */
    .token-table td { transition: background 110ms ease; }

    /* ─── Responsive ─────────────────────────────────────────────────── */
    @media (max-width: 768px) {
      .sidebar { display: none; }
      .main    { margin-left: 0; }
      .content { padding: var(--space-8) var(--space-5); }
      .do-dont { grid-template-columns: 1fr; }
      .topbar  { padding: var(--space-4) var(--space-5); }
    }

    /* ─── Print ──────────────────────────────────────────────────────── */
    @media print {
      .sidebar, .topbar { display: none; }
      .main { margin-left: 0; }
    }

    /* ═══════════════════════════════════════════════════════════════════
       NEW COMPONENTS — v1.1
       ═══════════════════════════════════════════════════════════════════ */

    /* ─── Text styles (composite utility classes) ────────────────────── */
    .type-display { font-size: var(--text-5xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
    .type-heading { font-size: var(--text-4xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
    .type-title   { font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
    .type-body    { font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-normal); letter-spacing: var(--tracking-normal); }
    .type-label   { font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: var(--leading-normal); letter-spacing: var(--tracking-normal); }
    .type-caption { font-size: var(--text-xs); font-weight: var(--weight-regular); line-height: var(--leading-normal); letter-spacing: var(--tracking-wide); }
    .type-code    { font-family: var(--font-mono); font-size: 0.875em; }

    /* ─── Checkbox ───────────────────────────────────────────────────── */
    .checkbox-group { display: flex; flex-direction: column; gap: var(--space-3); }

    .checkbox-wrap {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      cursor: pointer;
      user-select: none;
    }

    .checkbox-input {
      appearance: none;
      -webkit-appearance: none;
      width: 18px; height: 18px;
      border: 1.5px solid rgba(177,173,161,.55);
      border-radius: var(--radius-sm);
      background: var(--color-white);
      cursor: pointer;
      flex-shrink: 0;
      position: relative;
      transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease, box-shadow var(--duration-base) ease;
    }

    .checkbox-input:checked {
      background: var(--color-crail);
      border-color: var(--color-crail);
    }

    .checkbox-input:checked::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='white' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
      background-size: 12px;
      background-position: center;
      background-repeat: no-repeat;
    }

    .checkbox-input:indeterminate {
      background: var(--color-crail);
      border-color: var(--color-crail);
    }

    .checkbox-input:indeterminate::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
      background-size: 12px;
      background-position: center;
      background-repeat: no-repeat;
    }

    .checkbox-input:focus-visible {
      box-shadow: 0 0 0 3px rgba(193,95,60,.2);
      border-color: var(--color-crail);
      outline: none;
    }

    .checkbox-input:disabled { opacity: .4; cursor: not-allowed; }
    .checkbox-wrap:has(.checkbox-input:disabled) { cursor: not-allowed; color: var(--color-ink-muted); }

    .checkbox-label {
      font-size: var(--text-sm);
      color: var(--color-ink);
      font-weight: var(--weight-medium);
    }

    /* ─── Radio ──────────────────────────────────────────────────────── */
    .radio-group { display: flex; flex-direction: column; gap: var(--space-3); }

    .radio-wrap {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      cursor: pointer;
      user-select: none;
    }

    .radio-input {
      appearance: none;
      -webkit-appearance: none;
      width: 18px; height: 18px;
      border: 1.5px solid rgba(177,173,161,.55);
      border-radius: var(--radius-full);
      background: var(--color-white);
      cursor: pointer;
      flex-shrink: 0;
      position: relative;
      transition: border-color var(--duration-fast) ease, box-shadow var(--duration-base) ease;
    }

    .radio-input:checked {
      border-color: var(--color-crail);
      border-width: 5px;
    }

    .radio-input:focus-visible {
      box-shadow: 0 0 0 3px rgba(193,95,60,.2);
      border-color: var(--color-crail);
      outline: none;
    }

    .radio-input:disabled { opacity: .4; cursor: not-allowed; }

    .radio-label {
      font-size: var(--text-sm);
      color: var(--color-ink);
      font-weight: var(--weight-medium);
    }

    /* ─── Select / Dropdown ──────────────────────────────────────────── */
    .select-wrap { position: relative; display: block; }

    .select {
      width: 100%;
      height: 40px;
      padding: 0 var(--space-10) 0 var(--space-4);
      font-family: inherit;
      font-size: var(--text-sm);
      color: var(--color-ink);
      background: var(--color-white);
      border: 1.5px solid rgba(177,173,161,.5);
      border-radius: var(--radius-md);
      outline: none;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      transition: border-color var(--transition), box-shadow var(--transition);
    }

    .select:focus-visible {
      border-color: var(--color-crail);
      box-shadow: 0 0 0 3px rgba(193,95,60,.15);
    }

    .select:disabled { opacity: .4; cursor: not-allowed; background: rgba(177,173,161,.08); }

    .select-icon {
      position: absolute;
      right: var(--space-3);
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      color: var(--color-cloudy-dark);
      display: flex;
    }

    /* ─── Chip ───────────────────────────────────────────────────────── */
    .chip {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      height: 32px;
      padding: 0 var(--space-4);
      border-radius: var(--radius-full);
      font-size: var(--text-sm);
      font-weight: var(--weight-medium);
      background: var(--color-white);
      border: 1.5px solid rgba(177,173,161,.4);
      color: var(--color-ink);
      cursor: pointer;
      white-space: nowrap;
      user-select: none;
      transition:
        background var(--duration-fast) ease,
        border-color var(--duration-fast) ease,
        color var(--duration-fast) ease,
        transform var(--duration-base) var(--ease-spring);
    }

    .chip:hover { background: rgba(177,173,161,.12); border-color: var(--color-cloudy-dark); transform: translateY(-1px); }
    .chip:active { transform: scale(0.97); }

    /* Assist chip — no selection state */
    .chip-assist { gap: var(--space-2); }
    .chip-assist svg { width: 16px; height: 16px; color: var(--color-ink-muted); }

    /* Filter chip — toggleable */
    .chip-filter.active {
      background: rgba(193,95,60,.1);
      border-color: var(--color-crail);
      color: var(--color-crail-dark);
    }
    .chip-filter.active svg { color: var(--color-crail); }

    /* Input chip — has a remove button */
    .chip-input { padding-right: var(--space-2); }

    .chip-remove {
      background: none;
      border: none;
      color: var(--color-cloudy-dark);
      cursor: pointer;
      padding: 2px;
      display: flex;
      align-items: center;
      border-radius: var(--radius-full);
      transition: color var(--duration-fast) ease, background var(--duration-fast) ease;
      line-height: 1;
    }
    .chip-remove:hover { color: var(--color-error); background: rgba(217,79,79,.1); }
    .chip-remove svg { width: 14px; height: 14px; }

    /* Suggestion chip */
    .chip-suggestion { background: rgba(193,95,60,.06); border-color: transparent; }
    .chip-suggestion:hover { background: rgba(193,95,60,.12); border-color: rgba(193,95,60,.2); }

    /* Chip row wrapper */
    .chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

    /* ─── Modal / Dialog ─────────────────────────────────────────────── */
    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(44,42,39,.5);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-4);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--duration-base) ease;
    }

    .modal-backdrop.open {
      opacity: 1;
      pointer-events: auto;
    }

    .modal {
      background: var(--color-white);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-lg);
      width: 100%;
      max-width: 520px;
      max-height: calc(100vh - var(--space-8));
      display: flex;
      flex-direction: column;
      transform: translateY(20px) scale(0.97);
      opacity: 0;
      transition:
        transform var(--duration-slow) var(--ease-spring),
        opacity var(--duration-base) ease;
    }

    .modal-backdrop.open .modal {
      transform: translateY(0) scale(1);
      opacity: 1;
    }

    .modal-sm { max-width: 400px; }
    .modal-lg { max-width: 680px; }

    .modal-header {
      padding: var(--space-5) var(--space-6);
      border-bottom: 1px solid rgba(177,173,161,.2);
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: var(--space-4);
      flex-shrink: 0;
    }

    .modal-title {
      font-size: var(--text-lg);
      font-weight: var(--weight-semibold);
      color: var(--color-ink);
      letter-spacing: var(--tracking-tight);
    }

    .modal-close {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--color-cloudy-dark);
      padding: var(--space-1);
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: color var(--duration-fast) ease, background var(--duration-fast) ease;
    }

    .modal-close:hover { color: var(--color-ink); background: rgba(177,173,161,.15); }
    .modal-close:focus-visible { outline: 2px solid var(--color-crail); outline-offset: 2px; }
    .modal-close svg { width: 18px; height: 18px; }

    .modal-body {
      padding: var(--space-6);
      font-size: var(--text-sm);
      color: var(--color-ink-muted);
      line-height: var(--leading-relaxed);
      overflow-y: auto;
    }

    .modal-footer {
      padding: var(--space-4) var(--space-6);
      border-top: 1px solid rgba(177,173,161,.2);
      display: flex;
      justify-content: flex-end;
      gap: var(--space-3);
      background: rgba(177,173,161,.05);
      border-radius: 0 0 var(--radius-xl) var(--radius-xl);
      flex-shrink: 0;
    }

    /* ─── Toast / Snackbar ───────────────────────────────────────────── */
    .toast-stack {
      position: fixed;
      bottom: var(--space-6);
      right: var(--space-6);
      z-index: 300;
      display: flex;
      flex-direction: column-reverse;
      gap: var(--space-3);
      pointer-events: none;
      max-width: 400px;
      width: calc(100% - var(--space-12));
    }

    .toast {
      background: var(--color-ink);
      color: var(--color-white);
      padding: var(--space-3) var(--space-5);
      border-radius: var(--radius-lg);
      font-size: var(--text-sm);
      line-height: var(--leading-normal);
      box-shadow: var(--shadow-lg);
      display: flex;
      align-items: center;
      gap: var(--space-3);
      pointer-events: auto;
      border-left: 3px solid transparent;
      animation: toastIn var(--duration-slow) var(--ease-spring) both;
    }

    @keyframes toastIn {
      from { opacity: 0; transform: translateX(24px) scale(0.95); }
      to   { opacity: 1; transform: translateX(0) scale(1); }
    }

    .toast-success { border-left-color: var(--color-success); }
    .toast-error   { border-left-color: var(--color-error);   }
    .toast-warning { border-left-color: var(--color-warning); }
    .toast-info    { border-left-color: var(--color-crail);   }

    .toast-icon { flex-shrink: 0; display: flex; }
    .toast-icon svg { width: 16px; height: 16px; }

    .toast-message { flex: 1; }
    .toast-title { font-weight: var(--weight-semibold); margin-bottom: 2px; }

    .toast-close {
      background: none;
      border: none;
      color: rgba(255,255,255,.5);
      cursor: pointer;
      padding: 2px;
      display: flex;
      flex-shrink: 0;
      border-radius: var(--radius-sm);
      transition: color var(--duration-fast) ease;
    }

    .toast-close:hover { color: var(--color-white); }
    .toast-close svg { width: 14px; height: 14px; }

    /* ─── Tabs ───────────────────────────────────────────────────────── */
    .tabs-wrap { }

    .tabs {
      display: flex;
      gap: 0;
      border-bottom: 1px solid rgba(177,173,161,.25);
      overflow-x: auto;
      scrollbar-width: none;
    }
    .tabs::-webkit-scrollbar { display: none; }

    .tab {
      padding: var(--space-3) var(--space-5);
      font-size: var(--text-sm);
      font-weight: var(--weight-medium);
      color: var(--color-ink-muted);
      background: none;
      border: none;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
      white-space: nowrap;
      transition: color var(--duration-fast) ease, border-color var(--duration-base) ease;
      font-family: inherit;
    }

    .tab:hover { color: var(--color-ink); }

    .tab.active {
      color: var(--color-crail);
      border-bottom-color: var(--color-crail);
      font-weight: var(--weight-semibold);
    }

    .tab:focus-visible { outline: 2px solid var(--color-crail); outline-offset: 2px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }

    .tab-panels { padding-top: var(--space-5); }

    .tab-panel { display: none; font-size: var(--text-sm); color: var(--color-ink-muted); line-height: var(--leading-relaxed); }
    .tab-panel.active { display: block; animation: fadeUp var(--duration-base) var(--ease-out) both; }

    /* Secondary tabs (pill style) */
    .tabs-secondary {
      display: flex;
      gap: var(--space-1);
      border-bottom: none;
      background: rgba(177,173,161,.12);
      padding: var(--space-1);
      border-radius: var(--radius-lg);
      width: fit-content;
    }

    .tabs-secondary .tab {
      border-bottom: none;
      border-radius: var(--radius-md);
      margin-bottom: 0;
      padding: var(--space-2) var(--space-4);
    }

    .tabs-secondary .tab.active {
      background: var(--color-white);
      color: var(--color-ink);
      box-shadow: var(--shadow-sm);
      border-bottom-color: transparent;
      font-weight: var(--weight-semibold);
    }

    /* ─── Navigation Bar ─────────────────────────────────────────────── */
    .nav-bar {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      padding: 0 var(--space-6);
      height: 64px;
      background: var(--color-white);
      border-bottom: 1px solid rgba(177,173,161,.25);
      box-shadow: var(--shadow-sm);
    }

    .nav-logo {
      font-weight: var(--weight-bold);
      font-size: var(--text-lg);
      color: var(--color-ink);
      text-decoration: none;
      letter-spacing: var(--tracking-tight);
      flex-shrink: 0;
    }

    .nav-logo em {
      font-style: normal;
      color: var(--color-crail);
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: var(--space-1);
      margin-left: auto;
    }

    .nav-link {
      padding: var(--space-2) var(--space-3);
      font-size: var(--text-sm);
      font-weight: var(--weight-medium);
      color: var(--color-ink-muted);
      text-decoration: none;
      border-radius: var(--radius-md);
      transition: color var(--duration-fast) ease, background var(--duration-fast) ease;
      white-space: nowrap;
    }

    .nav-link:hover { color: var(--color-ink); background: rgba(177,173,161,.12); }
    .nav-link.active { color: var(--color-crail); background: rgba(193,95,60,.08); font-weight: var(--weight-semibold); }
    .nav-link:focus-visible { outline: 2px solid var(--color-crail); outline-offset: 2px; }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      margin-left: var(--space-4);
    }

    /* Bottom navigation (mobile pattern) */
    .nav-bottom {
      display: flex;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      height: 64px;
      background: var(--color-white);
      border-top: 1px solid rgba(177,173,161,.25);
      z-index: 90;
    }

    .nav-bottom-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      text-decoration: none;
      color: var(--color-ink-muted);
      font-size: 10px;
      font-weight: var(--weight-medium);
      letter-spacing: var(--tracking-wide);
      transition: color var(--duration-fast) ease;
    }

    .nav-bottom-item svg { width: 22px; height: 22px; }
    .nav-bottom-item.active { color: var(--color-crail); }

    /* ─── Breadcrumb ─────────────────────────────────────────────────── */
    .breadcrumb {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0;
      list-style: none;
    }

    .breadcrumb-item {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      font-size: var(--text-sm);
    }

    .breadcrumb-item a {
      color: var(--color-ink-muted);
      text-decoration: none;
      transition: color var(--duration-fast) ease;
    }

    .breadcrumb-item a:hover { color: var(--color-crail); }
    .breadcrumb-item a:focus-visible { outline: 2px solid var(--color-crail); outline-offset: 2px; border-radius: var(--radius-sm); }

    .breadcrumb-item.current {
      color: var(--color-ink);
      font-weight: var(--weight-medium);
      pointer-events: none;
    }

    .breadcrumb-sep {
      color: var(--color-cloudy);
      font-size: var(--text-xs);
      margin: 0 var(--space-2);
      user-select: none;
    }

    /* ─── Pagination ─────────────────────────────────────────────────── */
    .pagination {
      display: flex;
      align-items: center;
      gap: var(--space-1);
      flex-wrap: wrap;
    }

    .page-btn {
      min-width: 36px;
      height: 36px;
      padding: 0 var(--space-3);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-md);
      font-size: var(--text-sm);
      font-weight: var(--weight-medium);
      font-family: inherit;
      background: none;
      border: 1px solid transparent;
      color: var(--color-ink-muted);
      cursor: pointer;
      transition:
        background var(--duration-fast) ease,
        border-color var(--duration-fast) ease,
        color var(--duration-fast) ease;
    }

    .page-btn:hover { background: rgba(177,173,161,.15); color: var(--color-ink); border-color: rgba(177,173,161,.3); }
    .page-btn.active { background: var(--color-crail); color: var(--color-white); border-color: var(--color-crail); }
    .page-btn:disabled { opacity: .35; cursor: not-allowed; }
    .page-btn:disabled:hover { background: none; border-color: transparent; }
    .page-btn:focus-visible { outline: 2px solid var(--color-crail); outline-offset: 2px; }

    .page-ellipsis {
      min-width: 36px;
      height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--color-cloudy-dark);
      font-size: var(--text-sm);
      user-select: none;
    }

    /* ─── Table ──────────────────────────────────────────────────────── */
    .table-wrap {
      width: 100%;
      overflow-x: auto;
      border-radius: var(--radius-lg);
      border: 1px solid rgba(177,173,161,.2);
    }

    .table {
      width: 100%;
      border-collapse: collapse;
      font-size: var(--text-sm);
      background: var(--color-white);
    }

    .table thead { background: rgba(177,173,161,.07); }

    .table th {
      text-align: left;
      font-size: var(--text-xs);
      font-weight: var(--weight-semibold);
      letter-spacing: var(--tracking-wider);
      text-transform: uppercase;
      color: var(--color-cloudy-dark);
      padding: var(--space-3) var(--space-4);
      border-bottom: 1px solid rgba(177,173,161,.2);
      white-space: nowrap;
    }

    .table td {
      padding: var(--space-3) var(--space-4);
      color: var(--color-ink);
      border-bottom: 1px solid rgba(177,173,161,.12);
      vertical-align: middle;
    }

    .table tbody tr:last-child td { border-bottom: none; }
    .table tbody tr:hover td { background: rgba(193,95,60,.03); }

    .table-striped tbody tr:nth-child(even) td { background: rgba(177,173,161,.05); }
    .table-striped tbody tr:nth-child(even):hover td { background: rgba(193,95,60,.04); }

    /* Table cell modifiers */
    .table td.td-muted { color: var(--color-ink-muted); }
    .table td.td-mono  { font-family: var(--font-mono); font-size: var(--text-xs); }
    .table td.td-right { text-align: right; }

    /* ─── Skeleton loader ────────────────────────────────────────────── */
    .skeleton {
      background: rgba(177,173,161,.2);
      border-radius: var(--radius-sm);
      position: relative;
      overflow: hidden;
      display: block;
    }

    .skeleton::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,.5) 50%,
        transparent 100%
      );
      background-size: 200% 100%;
      animation: skeletonShimmer 1.6s ease-in-out infinite;
    }

    @keyframes skeletonShimmer {
      from { background-position: -200% 0; }
      to   { background-position:  200% 0; }
    }

    .skeleton-text { height: 1em; margin-bottom: 0.5em; }
    .skeleton-text:last-child { margin-bottom: 0; }
    .skeleton-w-full { width: 100%; }
    .skeleton-w-3-4  { width: 75%; }
    .skeleton-w-1-2  { width: 50%; }
    .skeleton-w-1-4  { width: 25%; }
    .skeleton-avatar { border-radius: var(--radius-full); }
    .skeleton-rect   { border-radius: var(--radius-md); }
    .skeleton-card   { border-radius: var(--radius-xl); }

    /* Skeleton card layout helper */
    .skeleton-block {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      padding: var(--space-6);
      background: var(--color-white);
      border: 1px solid rgba(177,173,161,.2);
      border-radius: var(--radius-xl);
    }

    .skeleton-row {
      display: flex;
      align-items: center;
      gap: var(--space-3);
    }

    /* ─── Slider / Range ─────────────────────────────────────────────── */
    .slider-wrap { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; }

    .slider-labels {
      display: flex;
      justify-content: space-between;
      font-size: var(--text-xs);
      color: var(--color-ink-muted);
    }

    .slider {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 4px;
      border-radius: var(--radius-full);
      background: rgba(177,173,161,.3);
      outline: none;
      cursor: pointer;
    }

    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: var(--radius-full);
      background: var(--color-crail);
      box-shadow: 0 2px 6px rgba(193,95,60,.3);
      cursor: grab;
      transition: transform var(--duration-base) var(--ease-spring), box-shadow var(--duration-fast) ease;
      border: 2px solid var(--color-white);
    }

    .slider::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border-radius: var(--radius-full);
      background: var(--color-crail);
      box-shadow: 0 2px 6px rgba(193,95,60,.3);
      cursor: grab;
      border: 2px solid var(--color-white);
    }

    .slider::-webkit-slider-thumb:active { transform: scale(1.25); cursor: grabbing; }
    .slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(193,95,60,.25); }
    .slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(193,95,60,.25); }

    /* ─── FAB (Floating Action Button) ──────────────────────────────── */
    .fab {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 56px;
      border-radius: var(--radius-full);
      background: var(--color-crail);
      color: var(--color-white);
      border: none;
      cursor: pointer;
      box-shadow: var(--shadow-md);
      transition:
        transform  var(--duration-base) var(--ease-spring),
        box-shadow var(--duration-base) ease;
      will-change: transform;
      flex-shrink: 0;
    }

    .fab:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 8px 24px rgba(193,95,60,.38); }
    .fab:active { transform: scale(0.94); box-shadow: var(--shadow-sm); }
    .fab:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(193,95,60,.25), var(--shadow-md); }
    .fab svg { width: 24px; height: 24px; }

    .fab-sm { width: 40px; height: 40px; }
    .fab-sm svg { width: 20px; height: 20px; }

    .fab-lg { width: 72px; height: 72px; }
    .fab-lg svg { width: 28px; height: 28px; }

    .fab-extended {
      width: auto;
      padding: 0 var(--space-5);
      gap: var(--space-2);
      border-radius: var(--radius-full);
      font-family: inherit;
      font-size: var(--text-sm);
      font-weight: var(--weight-semibold);
    }

    /* Secondary FAB */
    .fab-secondary {
      background: var(--color-white);
      color: var(--color-crail);
    }

    .fab-secondary:hover { box-shadow: 0 8px 24px rgba(193,95,60,.2); }

    /* ─── Divider (semantic) ─────────────────────────────────────────── */
    .hr {
      border: none;
      border-top: 1px solid rgba(177,173,161,.25);
      margin: var(--space-6) 0;
    }

    .hr-text {
      display: flex;
      align-items: center;
      gap: var(--space-4);
      font-size: var(--text-xs);
      color: var(--color-cloudy-dark);
      font-weight: var(--weight-medium);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      margin: var(--space-6) 0;
    }

    .hr-text::before, .hr-text::after {
      content: '';
      flex: 1;
      height: 1px;
      background: rgba(177,173,161,.25);
    }

    /* ─── Skip navigation (a11y) ─────────────────────────────────────── */
    .skip-link {
      position: absolute;
      top: -100%;
      left: var(--space-4);
      background: var(--color-crail);
      color: var(--color-white);
      padding: var(--space-2) var(--space-4);
      border-radius: 0 0 var(--radius-md) var(--radius-md);
      font-size: var(--text-sm);
      font-weight: var(--weight-semibold);
      text-decoration: none;
      z-index: 9999;
      transition: top var(--duration-fast) ease;
    }

    .skip-link:focus { top: 0; }