@tollerud/ui 1.1.5 → 3.0.0

package/globals.css

@@ -1,948 +1,21 @@
 /* ═══════════════════════════════════════════════
-   Tollerud Design System — Global CSS (for Next.js globals.css)
+   Tollerud Design System — Global CSS (Tailwind v4)
    ══════════════════════════════════════════════
    Usage in app/globals.css:
-     @import './path/to/globals.css';
 
-   Or copy the @layer base block into your own globals.css.
-   ═══════════════════════════════════════════════ */
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root,
-  .dark {
-    /* ═══ Brand Tokens ═══ */
-    --tollerud-yellow:         #FFFF00;
-    --tollerud-yellow-warm:    #E8D500;
-    --tollerud-acid:           #FFFF00; /* Tollerud high-voltage yellow */
-    --tollerud-yellow-dim:     #B8A800;
-    --tollerud-amber:          #FFB800;
-    --tollerud-amber-glow:     #FF8C00;
-
-    /* ═══ Noir Scale ═══ */
-    --tollerud-black:          #0A0A0A;
-    --tollerud-noir-900:       #121212;
-    --tollerud-noir-800:       #1A1A1A;
-    --tollerud-noir-700:       #252525;
-    --tollerud-noir-600:       #333333;
-    --tollerud-noir-500:       #4A4A4A;
-    --tollerud-noir-400:       #666666;
-    --tollerud-noir-300:       #888888;
-    --tollerud-noir-200:       #AAAAAA;
-    --tollerud-noir-100:       #CCCCCC;
-    --tollerud-noir-50:        #E5E5E5;
-    --tollerud-white:          #F5F5F5;
-
-    /* ═══ Semantic Tokens (shadcn/ui compatible) ═══ */
-    --background:         #0A0A0A;
-    --foreground:         #F5F5F5;
-
-    --card:               #121212;
-    --card-foreground:    #F5F5F5;
-
-    --popover:            #1A1A1A;
-    --popover-foreground: #F5F5F5;
-
-    --primary:            #FFFF00;
-    --primary-foreground: #0A0A0A;
-
-    --secondary:          #252525;
-    --secondary-foreground: #AAAAAA;
-
-    --muted:              #252525;
-    --muted-foreground:   #888888;
-
-    --accent:             #FFB800;
-    --accent-foreground:  #0A0A0A;
-
-    --destructive:        #EF4444;
-    --destructive-foreground: #F5F5F5;
-
-    --success:            #22C55E;
-    --success-foreground: #0A0A0A;
-
-    --warning:            #E8D500;
-    --warning-foreground: #0A0A0A;
-
-    --info:               #3B82F6;
-    --info-foreground:    #FFFFFF;
-
-    --border:             #333333;
-    --input:              #333333;
-    --ring:               #FFFF00;
-    --radius:             0.25rem;
-
-    /* ═══ Chart Tokens ═══ */
-    --chart-1:            #FFFF00;
-    --chart-2:            #FFB800;
-    --chart-3:            #22C55E;
-    --chart-4:            #3B82F6;
-    --chart-5:            #EF4444;
-    --chart-grid:         rgba(245,245,245,0.08);
-    --chart-axis:         rgba(245,245,245,0.35);
-
-    /* ═══ Motion Tokens ═══ */
-    --motion-duration-fast:   150ms;
-    --motion-duration-normal: 250ms;
-    --motion-duration-slow:   350ms;
-    --motion-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
-    --motion-ease-in:      cubic-bezier(0.7, 0, 0.84, 0);
-    --motion-ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
-
-    /* ═══ Elevation / z-index ═══ */
-    --z-base:       0;
-    --z-dropdown:   10;
-    --z-sticky:     20;
-    --z-fixed:      30;
-    --z-overlay:    40;
-    --z-modal:      50;
-    --z-toast:      60;
-    --z-tooltip:    70;
-
-    /* ═══ Shadow scale (noir: deep + low-spread, never milky) ═══ */
-    --shadow-sm:    0 1px 2px rgba(0,0,0,0.40);
-    --shadow-md:    0 4px 12px rgba(0,0,0,0.45);
-    --shadow-lg:    0 12px 32px rgba(0,0,0,0.55);
-    --shadow-xl:    0 24px 60px rgba(0,0,0,0.65);
-    --shadow-glow:  0 0 15px rgba(255,255,0,0.30);
-
-    /* ═══ Surface Tokens ═══ */
-    --surface:              #0A0A0A;
-    --surface-raised:       #121212;
-    --surface-overlay:      #1A1A1A;
-    --surface-hover:        #252525;
-
-    /* ═══ Text ═══ */
-    --text-primary:         #F5F5F5;
-    --text-secondary:       #AAAAAA;
-    --text-muted:           #666666;
-    --text-inverse:         #0A0A0A;
-
-    /* ═══ Typography ═══ */
-    --font-sans:     'Inter', 'SF Pro', system-ui, sans-serif;
-    --font-mono:     'JetBrains Mono', 'Fira Code', monospace;
-    --font-display:  'Inter', 'SF Pro Display', system-ui, sans-serif;
-
-    /* ═══ Glass ═══ */
-    --glass-bg:       rgba(10, 10, 10, 0.88);
-    --glass-border:   rgba(232, 213, 0, 0.08);
-    --glass-blur:     blur(20px);
-
-    /* ═══ Grid Background ═══ */
-    --grid-color:     rgba(232, 213, 0, 0.03);
-    --grid-size:      40px;
-
-    /* ═══ Gradient Accents ═══ */
-    --gradient-yellow: linear-gradient(
-      90deg,
-      transparent,
-      #E8D500 35%,
-      #FFB800 50%,
-      #E8D500 65%,
-      transparent
-    );
-    --gradient-btn:    linear-gradient(
-      135deg,
-      #E8D500,
-      #B8A800
-    );
-    --gradient-soft:   linear-gradient(
-      135deg,
-      rgba(232, 213, 0, 0.8),
-      rgba(255, 184, 0, 0.4)
-    );
-
-    /* ═══ Transition ═══ */
-    --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
-    --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
-    --transition-slow:   350ms cubic-bezier(0.4, 0, 0.2, 1);
-  }
-
-  /* ═══ Base Reset ═══ */
-  * {
-    border-color: var(--border);
-  }
-
-  body {
-    font-family: var(--font-sans);
-    font-size: 1rem;
-    color: var(--foreground);
-    background-color: var(--background);
-    line-height: 1.5;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  ::selection {
-    background-color: rgba(232, 213, 0, 0.55);
-    color: #0A0A0A;
-  }
-
-  ::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-  ::-webkit-scrollbar-track {
-    background: var(--background);
-  }
-  ::-webkit-scrollbar-thumb {
-    background: var(--tollerud-noir-600);
-    border-radius: 4px;
-  }
-  ::-webkit-scrollbar-thumb:hover {
-    background: var(--tollerud-noir-500);
-  }
-
-  /* ═══ Respect 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;
-    }
-  }
-}
-
-@layer components {
-  /* ═══ Card ═══ */
-  .tollerud-card {
-    background: var(--card);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    padding: 1.5rem;
-    transition: border-color var(--transition-fast);
-  }
-  .tollerud-card:hover {
-    border-color: var(--tollerud-noir-500);
-  }
-
-  /* ═══ Button Base ═══ */
-  .tollerud-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    font-family: var(--font-sans);
-    font-weight: 600;
-    border-radius: var(--radius);
-    transition: all var(--transition-fast);
-    cursor: pointer;
-    border: 1px solid transparent;
-  }
-  .tollerud-btn:focus-visible {
-    outline: 2px solid var(--ring);
-    outline-offset: 2px;
-  }
-  .tollerud-btn--primary {
-    background: var(--primary);
-    color: var(--primary-foreground);
-    border-color: var(--primary);
-  }
-  .tollerud-btn--primary:hover {
-    background: var(--tollerud-yellow);
-    box-shadow: var(--shadow-glow, 0 0 15px rgba(255,255,0,0.3));
-  }
-  .tollerud-btn--secondary {
-    background: transparent;
-    color: var(--foreground);
-    border-color: var(--border);
-  }
-  .tollerud-btn--secondary:hover {
-    border-color: var(--tollerud-noir-200);
-    background: var(--surface-hover);
-  }
-  .tollerud-btn--ghost {
-    background: transparent;
-    color: var(--text-secondary);
-  }
-  .tollerud-btn--ghost:hover {
-    color: var(--foreground);
-    background: var(--surface-hover);
-  }
-  .tollerud-btn--destructive {
-    background: var(--destructive);
-    color: var(--destructive-foreground);
-    border-color: var(--destructive);
-  }
-  .tollerud-btn--destructive:hover {
-    box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
-  }
-  .tollerud-btn--sm  { padding: 0.25rem 0.75rem; font-size: 0.875rem; }
-  .tollerud-btn--md  { padding: 0.5rem 1rem; font-size: 1rem; }
-  .tollerud-btn--lg  { padding: 0.75rem 1.5rem; font-size: 1.125rem; }
-  .tollerud-btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
+     @import '@tollerud/ui/globals.css';
+     @source '../node_modules/@tollerud/ui/dist';
 
-  /* ═══ Terminal CTA ═══ */
-  .tollerud-btn--terminal {
-    background: transparent;
-    color: var(--tollerud-yellow);
-    border: 1px solid rgba(232, 213, 0, 0.25);
-    font-weight: 500;
-    letter-spacing: normal;
-    font-family: var(--font-mono);
-  }
-  .tollerud-btn--terminal::before {
-    content: '❯ ';
-    opacity: 0.7;
-  }
-  .tollerud-btn--terminal:hover {
-    border-color: var(--tollerud-yellow);
-    box-shadow: 0 0 15px rgba(255,255,0,0.3), 0 0 30px rgba(255,255,0,0.1);
-    background: rgba(232, 213, 0, 0.05);
-  }
+   Optional preset shim (extra theme tokens from tollerud-preset.js):
 
-  /* ═══ Input ═══ */
-  .tollerud-input {
-    font-family: var(--font-sans);
-    font-size: 1rem;
-    padding: 0.5rem 0.75rem;
-    background: var(--card);
-    border: 1px solid var(--input);
-    border-radius: var(--radius);
-    color: var(--foreground);
-    transition: border-color var(--transition-fast);
-    width: 100%;
-  }
-  .tollerud-input::placeholder {
-    color: var(--text-muted);
-  }
-  .tollerud-input:focus {
-    outline: none;
-    border-color: var(--ring);
-    box-shadow: 0 0 0 1px var(--ring);
-  }
+     @import 'tailwindcss';
+     @config './tailwind.config.ts';
+     @import '@tollerud/ui/tokens.css';
+     @import '@tollerud/ui/globals-layers.css';
 
-  /* ═══ Badge ═══ */
-  .tollerud-badge {
-    display: inline-flex;
-    align-items: center;
-    padding: 0.125rem 0.5rem;
-    font-size: 0.75rem;
-    font-weight: 500;
-    border-radius: var(--radius);
-    letter-spacing: 0.02em;
-  }
-  .tollerud-badge--default {
-    background: var(--muted);
-    color: var(--text-secondary);
-  }
-  .tollerud-badge--accent {
-    background: rgba(232, 213, 0, 0.15);
-    color: var(--tollerud-yellow);
-  }
-  .tollerud-badge--success {
-    background: rgba(34, 197, 94, 0.15);
-    color: var(--success);
-  }
-  .tollerud-badge--error {
-    background: rgba(239, 68, 68, 0.15);
-    color: var(--destructive);
-  }
-  .tollerud-badge--info {
-    background: rgba(59, 130, 246, 0.15);
-    color: var(--info);
-  }
-  .tollerud-badge--warning {
-    background: rgba(232, 213, 0, 0.15);
-    color: var(--warning);
-  }
-
-  /* ═══ Pill Tags ═══ */
-  .tollerud-pill {
-    display: inline-flex;
-    align-items: center;
-    padding: 0.375rem 1rem;
-    font-size: 0.6875rem;
-    font-weight: 500;
-    border-radius: 3px;
-    border: 1px solid;
-    letter-spacing: 0.01em;
-  }
-  .tollerud-pill--outline {
-    background: rgba(232, 213, 0, 0.06);
-    color: var(--tollerud-yellow);
-    border-color: rgba(232, 213, 0, 0.35);
-  }
-  .tollerud-pill--muted {
-    background: rgba(232, 213, 0, 0.03);
-    color: rgba(232, 213, 0, 0.55);
-    border-color: rgba(232, 213, 0, 0.15);
-  }
-  .tollerud-pill--success {
-    background: rgba(34, 197, 94, 0.06);
-    color: var(--success);
-    border-color: rgba(34, 197, 94, 0.35);
-  }
-  .tollerud-pill--error {
-    background: rgba(239, 68, 68, 0.06);
-    color: var(--destructive);
-    border-color: rgba(239, 68, 68, 0.35);
-  }
-
-  /* ═══ Divider ═══ */
-  .tollerud-divider {
-    border: none;
-    border-top: 1px solid var(--border);
-    margin: 1.5rem 0;
-  }
-  .tollerud-divider--accent {
-    border-color: var(--tollerud-yellow);
-    width: 4rem;
-  }
-
-  /* ═══ Accent Bar (Graphify style) ═══ */
-  .tollerud-accent-bar {
-    height: 1px;
-    border: none;
-    background: var(--gradient-yellow);
-    margin: 3rem 0;
-  }
-
-  /* ═══ Gradient Text ═══ */
-  .tollerud-gradient-text {
-    background: var(--gradient-soft);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-  }
-
-  /* ═══ Noir Glow Background (Tollerud.no signature) ═══ */
-  .tollerud-noir-glow-root {
-    background: #000;
-    isolation: isolate;
-  }
-
-  .tollerud-noir-glow-bg {
-    position: absolute;
-    inset: 0;
-    background:
-      radial-gradient(70% 75% at 100% 0%, hsl(56, 100%, 80%) 0%, transparent 70%),
-      radial-gradient(80% 85% at 0% 100%, hsl(56, 100%, 50%) 0%, transparent 72%),
-      radial-gradient(60% 65% at 0% 0%, hsl(54, 85%, 66%) 0%, transparent 68%),
-      #000;
-    opacity: 0.45;
-    filter: saturate(1.05) contrast(1.02);
-    transform: translateZ(0);
-    animation: tollerud-noir-glow-drift 32s var(--motion-ease-in-out) infinite alternate;
-  }
-
-  .tollerud-noir-glow-vignette {
-    position: absolute;
-    inset: 0;
-    background:
-      radial-gradient(ellipse at center, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.08) 26%, rgba(0,0,0,0.2) 58%, rgba(0,0,0,0.64) 100%),
-      linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.5));
-  }
-
-  .tollerud-noir-noise {
-    position: absolute;
-    inset: -20%;
-    opacity: 0.16;
-    mix-blend-mode: screen;
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.85'/%3E%3C/svg%3E");
-    animation: tollerud-noir-noise-shift 1.6s steps(2, end) infinite;
-  }
-
-  @keyframes tollerud-noir-glow-drift {
-    0% {
-      transform: scale(1.02) translate3d(-1.5%, -1%, 0) rotate(0deg);
-      filter: saturate(1.05) contrast(1.04);
-    }
-    50% {
-      transform: scale(1.07) translate3d(1.2%, 0.8%, 0) rotate(0.8deg);
-      filter: saturate(1.2) contrast(1.12);
-    }
-    100% {
-      transform: scale(1.04) translate3d(1.8%, -1.4%, 0) rotate(-0.6deg);
-      filter: saturate(1.1) contrast(1.08);
-    }
-  }
-
-  @keyframes tollerud-noir-noise-shift {
-    0% { transform: translate3d(0, 0, 0); }
-    25% { transform: translate3d(-2%, 1%, 0); }
-    50% { transform: translate3d(1%, -2%, 0); }
-    75% { transform: translate3d(2%, 2%, 0); }
-    100% { transform: translate3d(-1%, 0, 0); }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .tollerud-noir-glow-bg,
-    .tollerud-noir-noise {
-      animation: none !important;
-    }
-  }
-
-  /* ═══ Grid Background ═══ */
-  .tollerud-grid-bg {
-    pointer-events: none;
-    background-image:
-      linear-gradient(var(--grid-color) 1px, transparent 1px),
-      linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
-    background-size: var(--grid-size) var(--grid-size);
-  }
-
-  /* ═══ Glass / Frosted ═══ */
-  .tollerud-glass {
-    background: var(--glass-bg);
-    backdrop-filter: var(--glass-blur);
-    -webkit-backdrop-filter: var(--glass-blur);
-    border-bottom: 1px solid var(--glass-border);
-  }
-
-  /* ═══ Focus Ring ═══ */
-  .tollerud-focus-ring:focus-visible {
-    outline: 2px solid var(--ring);
-    outline-offset: 2px;
-  }
-
-  /* ═══ Glow ═══ */
-  .tollerud-glow {
-    box-shadow: 0 0 15px rgba(255,255,0,0.3), 0 0 30px rgba(255,255,0,0.1);
-  }
-
-  /* ═══ Skeleton ═══ */
-  .tollerud-skeleton {
-    background: linear-gradient(
-      90deg,
-      var(--muted) 25%,
-      var(--tollerud-noir-600) 50%,
-      var(--muted) 75%
-    );
-    background-size: 200% 100%;
-    animation: tollerud-skeleton-shimmer 1.5s ease-in-out infinite;
-    border-radius: var(--radius);
-  }
-  @keyframes tollerud-skeleton-shimmer {
-    0%   { background-position: 200% 0; }
-    100% { background-position: -200% 0; }
-  }
-
-  /* ═══ Display Heading ═══ */
-  .tollerud-display {
-    font-weight: 600;
-    letter-spacing: -0.045em;
-    line-height: 0.95;
-    color: var(--foreground);
-  }
-  .tollerud-display--secondary {
-    letter-spacing: -0.035em;
-    line-height: 1;
-  }
-  .tollerud-display--tertiary {
-    letter-spacing: -0.025em;
-    line-height: 1.1;
-  }
-
-  /* ═══ Status Indicator ═══ */
-  .tollerud-status {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.375rem;
-    font-size: 0.75rem;
-    font-weight: 500;
-  }
-  .tollerud-status::before {
-    content: '';
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    display: inline-block;
-  }
-  .tollerud-status--online::before { background: var(--success); box-shadow: 0 0 6px rgba(34,197,94,0.5); }
-  .tollerud-status--offline::before { background: var(--destructive); }
-  .tollerud-status--warning::before { background: var(--warning); box-shadow: 0 0 6px rgba(255,255,0,0.5); }
-  .tollerud-status--idle::before { background: var(--tollerud-noir-400); }
-
-  /* ═══ Code Block ═══ */
-  .tollerud-code-block {
-    background: var(--tollerud-noir-900);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    padding: 1rem;
-    font-family: var(--font-mono);
-    font-size: 0.875rem;
-    line-height: 1.7;
-    overflow-x: auto;
-    color: var(--tollerud-noir-200);
-  }
-  .tollerud-code-block .prompt { color: var(--tollerud-yellow); }
-  .tollerud-code-block .comment { color: var(--tollerud-noir-400); font-style: italic; }
-
-  /* ═══ Stat Card (for dashboards) ═══ */
-  .tollerud-stat {
-    background: var(--card);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    padding: 1rem 1.25rem;
-  }
-  .tollerud-stat__label {
-    font-size: 0.75rem;
-    font-weight: 500;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    color: var(--text-muted);
-  }
-  .tollerud-stat__value {
-    font-size: 1.5rem;
-    font-weight: 600;
-    color: var(--foreground);
-    margin-top: 0.125rem;
-  }
-  .tollerud-stat__change {
-    font-size: 0.75rem;
-    font-weight: 500;
-    margin-top: 0.125rem;
-  }
-  .tollerud-stat__change--up   { color: var(--success); }
-  .tollerud-stat__change--down { color: var(--destructive); }
-
-  /* ═══ Timeline ═══ */
-  .tollerud-timeline {
-    display: flex;
-    flex-direction: column;
-  }
-  .tollerud-timeline__item {
-    display: flex;
-    gap: 0.75rem;
-  }
-  .tollerud-timeline__marker {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 20px;
-    flex-shrink: 0;
-  }
-  .tollerud-timeline__dot-group {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    height: 100%;
-  }
-  .tollerud-timeline__dot {
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    background: var(--tollerud-noir-500);
-    flex-shrink: 0;
-    z-index: 1;
-  }
-  .tollerud-timeline__dot--active {
-    animation: tollerud-timeline-pulse 2s infinite;
-  }
-  @keyframes tollerud-timeline-pulse {
-    0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,0,0.4); }
-    50%      { box-shadow: 0 0 0 6px rgba(255,255,0,0); }
-  }
-  .tollerud-timeline__line {
-    width: 1px;
-    flex: 1;
-    min-height: 12px;
-    background: linear-gradient(
-      180deg,
-      var(--tollerud-noir-600) 0%,
-      var(--tollerud-noir-600) 80%,
-      transparent 100%
-    );
-  }
-  .tollerud-timeline:not(.tollerud-timeline--active) .tollerud-timeline__dot--active {
-    animation: none;
-    box-shadow: 0 0 6px rgba(255,255,0,0.4);
-  }
-  .tollerud-timeline__icon {
-    width: 20px;
-    height: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--tollerud-yellow);
-  }
-  .tollerud-timeline__content {
-    flex: 1;
-    min-width: 0;
-    padding-bottom: 1.25rem;
-  }
-  .tollerud-timeline__title {
-    font-size: 0.875rem;
-    font-weight: 600;
-    color: var(--foreground);
-  }
-  .tollerud-timeline__time {
-    font-size: 0.75rem;
-    color: var(--text-muted);
-    white-space: nowrap;
-    flex-shrink: 0;
-  }
-  .tollerud-timeline__description {
-    font-size: 0.8125rem;
-    color: var(--text-secondary);
-    margin-top: 0.125rem;
-    line-height: 1.4;
-  }
-  .tollerud-timeline__meta {
-    font-size: 0.6875rem;
-    color: var(--text-muted);
-    background: var(--tollerud-noir-800);
-    padding: 0.125rem 0.375rem;
-    border-radius: 3px;
-    border: 1px solid var(--tollerud-noir-600);
-  }
-
-  /* ═══ Kbd (Keyboard Shortcut Chip) ═══ */
-  .tollerud-kbd {
-    display: inline-flex;
-    align-items: center;
-    gap: 2px;
-  }
-  .tollerud-kbd__key {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 22px;
-    height: 22px;
-    padding: 0 5px;
-    font-family: var(--font-mono);
-    font-size: 11px;
-    font-weight: 500;
-    line-height: 1;
-    color: var(--tollerud-noir-200);
-    background: var(--tollerud-noir-800);
-    border: 1px solid var(--tollerud-noir-600);
-    border-radius: 4px;
-    box-shadow: 0 1px 0 var(--tollerud-noir-600);
-  }
-  .tollerud-kbd--sm .tollerud-kbd__key {
-    min-width: 18px;
-    height: 18px;
-    padding: 0 4px;
-    font-size: 10px;
-  }
-
-  /* ═══ Action Row ═══ */
-  .tollerud-action-row {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    width: 100%;
-    padding: 0.5rem 0.75rem;
-    background: transparent;
-    border: none;
-    border-radius: 6px;
-    cursor: pointer;
-    text-align: left;
-    font-family: var(--font-sans);
-    transition: background var(--motion-duration-fast) var(--motion-ease-in-out);
-  }
-  .tollerud-action-row:hover,
-  .tollerud-action-row--highlighted {
-    background: var(--tollerud-noir-700);
-  }
-  .tollerud-action-row--disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-  .tollerud-action-row__icon {
-    flex-shrink: 0;
-    width: 20px;
-    height: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--tollerud-yellow);
-  }
-  .tollerud-action-row__icon svg {
-    width: 18px;
-    height: 18px;
-  }
-  .tollerud-action-row__content {
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 1px;
-  }
-  .tollerud-action-row__label {
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--foreground);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .tollerud-action-row__description {
-    font-size: 12px;
-    color: var(--text-muted);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .tollerud-action-row__shortcut {
-    flex-shrink: 0;
-    margin-left: auto;
-  }
-
-  /* ═══ Command Menu ═══ */
-  .tollerud-cmd-overlay {
-    position: fixed;
-    inset: 0;
-    z-index: var(--z-overlay);
-    background: rgba(0, 0, 0, 0.6);
-    backdrop-filter: blur(4px);
-    -webkit-backdrop-filter: blur(4px);
-    animation: tollerud-cmd-overlay-in 150ms var(--motion-ease-out);
-  }
-  @keyframes tollerud-cmd-overlay-in {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-  }
-
-  .tollerud-cmd {
-    position: fixed;
-    top: 15vh;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: var(--z-modal);
-    width: min(90vw, 640px);
-    max-height: 70vh;
-    display: flex;
-    flex-direction: column;
-    background: var(--surface-raised);
-    border: 1px solid var(--tollerud-noir-600);
-    border-radius: 12px;
-    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
-    animation: tollerud-cmd-in 200ms var(--motion-ease-out);
-    overflow: hidden;
-  }
-  @keyframes tollerud-cmd-in {
-    from {
-      opacity: 0;
-      transform: translateX(-50%) scale(0.96) translateY(-8px);
-    }
-    to {
-      opacity: 1;
-      transform: translateX(-50%) scale(1) translateY(0);
-    }
-  }
-
-  .tollerud-cmd__header {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    padding: 0.75rem 1rem;
-    border-bottom: 1px solid var(--border);
-    flex-shrink: 0;
-  }
-  .tollerud-cmd__search-icon {
-    flex-shrink: 0;
-    color: var(--text-muted);
-    display: flex;
-    align-items: center;
-  }
-  .tollerud-cmd__input {
-    flex: 1;
-    background: transparent;
-    border: none;
-    outline: none;
-    color: var(--foreground);
-    font-family: var(--font-sans);
-    font-size: 16px;
-    line-height: 1.5;
-  }
-  .tollerud-cmd__input::placeholder {
-    color: var(--text-muted);
-  }
-
-  .tollerud-cmd__list {
-    flex: 1;
-    overflow-y: auto;
-    padding: 0.5rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-  }
-  .tollerud-cmd__empty {
-    padding: 2rem 1rem;
-    text-align: center;
-    font-size: 14px;
-    color: var(--text-muted);
-  }
-  .tollerud-cmd__group {
-    display: flex;
-    flex-direction: column;
-    gap: 1px;
-  }
-  .tollerud-cmd__group-label {
-    padding: 0.5rem 0.75rem 0.25rem;
-    font-size: 11px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    color: var(--text-muted);
-  }
-
-  .tollerud-cmd__footer {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    padding: 0.5rem 1rem;
-    border-top: 1px solid var(--border);
-    flex-shrink: 0;
-  }
-  .tollerud-cmd__hint {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-  }
-  .tollerud-cmd__hint-text {
-    font-size: 11px;
-    color: var(--text-muted);
-  }
-}
-
-@layer utilities {
-  /* ═══ Text utilities ═══ */
-  .text-balance { text-wrap: balance; }
-
-  /* ═══ Section container ═══ */
-  .tollerud-section {
-    max-width: 1100px;
-    margin-left: auto;
-    margin-right: auto;
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-  }
-}
-
-/* ═══════════════════════════════════════════════
-   Tailwind v4 safelist — Alert tone classes
-   ═══════════════════════════════════════════════
-   These classes are used dynamically in Alert.tsx and would be missed
-   by @source scanning a pre-compiled dist file. Declaring them here
-   ensures Tailwind always generates them regardless of @source config.
+   Tailwind v3 legacy: use @tollerud/ui/globals-v3.css with a v3 config + preflight/utilities.
    ═══════════════════════════════════════════════ */
 
-/*
-@source inline("
-  bg-red-500/5 border-red-500/30 text-red-400
-  bg-blue-500/5 border-blue-500/30 text-blue-400
-  bg-green-500/5 border-green-500/30 text-green-400
-");
-*/
-
-@layer utilities {
-  .bg-red-500\/5   { background-color: rgb(239 68 68 / 0.05); }
-  .bg-blue-500\/5  { background-color: rgb(59 130 246 / 0.05); }
-  .bg-green-500\/5 { background-color: rgb(34 197 94 / 0.05); }
-  .border-red-500\/30   { border-color: rgb(239 68 68 / 0.3); }
-  .border-blue-500\/30  { border-color: rgb(59 130 246 / 0.3); }
-  .border-green-500\/30 { border-color: rgb(34 197 94 / 0.3); }
-  .text-red-400   { color: rgb(248 113 113); }
-  .text-blue-400  { color: rgb(96 165 250); }
-  .text-green-400 { color: rgb(74 222 128); }
-}
+@import "tailwindcss";
+@import "./tokens.css";
+@import "./globals-layers.css";