@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;

    /* ═══ 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)
    );
    --tollerud-shimmer-highlight: #FFFDE6;

    /* ═══ Transition (shorthand aliases of the Motion Tokens above) ═══ */
    --transition-fast:   var(--motion-duration-fast) var(--motion-ease-in-out);
    --transition-normal: var(--motion-duration-normal) var(--motion-ease-in-out);
    --transition-slow:   var(--motion-duration-slow) var(--motion-ease-in-out);
  }

  /* ═══ 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;
  }

  .tollerud-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  ::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;
    }
    .tollerud-display-shimmer {
      animation: none !important;
      background: none;
      -webkit-background-clip: initial;
      background-clip: initial;
      color: var(--primary);
    }
    .tollerud-btn--primary::after,
    .tollerud-btn--terminal::after,
    .tollerud-btn-glow::after {
      display: none;
    }
  }
}

@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: var(--surface-raised);
    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--ghost-destructive {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
  }
  .tollerud-btn--ghost-destructive:hover,
  .tollerud-btn--ghost-destructive:focus-visible {
    color: var(--destructive);
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
  }
  .tollerud-btn--ghost-success {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
  }
  .tollerud-btn--ghost-success:hover,
  .tollerud-btn--ghost-success:focus-visible {
    color: var(--tollerud-success);
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
  }
  .tollerud-btn--ghost-warning {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
  }
  .tollerud-btn--ghost-warning:hover,
  .tollerud-btn--ghost-warning:focus-visible {
    color: var(--tollerud-warning);
    background: rgba(232, 213, 0, 0.1);
    border-color: rgba(232, 213, 0, 0.3);
  }
  .tollerud-btn--ghost-info {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
  }
  .tollerud-btn--ghost-info:hover,
  .tollerud-btn--ghost-info:focus-visible {
    color: var(--tollerud-info);
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
  }
  .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  { height: 1.75rem; padding: 0 0.75rem; font-size: 0.875rem; line-height: 1; }
  .tollerud-btn--md  { height: 2.5rem; padding: 0 1rem; font-size: 1rem; line-height: 1; }
  .tollerud-btn--lg  { height: 3rem; padding: 0 1.5rem; font-size: 1.125rem; line-height: 1; }
  .tollerud-btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

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

  /* Magnetic pointer glow — pair with initButtonGlow() from @tollerud/ui */
  .tollerud-btn--primary,
  .tollerud-btn--terminal,
  .tollerud-btn-glow {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .tollerud-btn--primary::after,
  .tollerud-btn--terminal::after,
  .tollerud-btn-glow::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    z-index: 0;
    transition: opacity 0.3s var(--motion-ease-out, ease-out);
    background: radial-gradient(
      130px circle at var(--glow-x, 50%) var(--glow-y, 50%),
      rgba(255, 255, 255, 0.45),
      transparent 60%
    );
  }
  .tollerud-btn--terminal::after,
  .tollerud-btn-glow::after {
    background: radial-gradient(
      150px circle at var(--glow-x, 50%) var(--glow-y, 50%),
      rgba(232, 213, 0, 0.3),
      transparent 62%
    );
  }
  .tollerud-btn--primary.is-glowing::after,
  .tollerud-btn--terminal.is-glowing::after,
  .tollerud-btn-glow.is-glowing::after {
    opacity: 1;
  }
  .tollerud-btn--primary > *,
  .tollerud-btn--terminal > *,
  .tollerud-btn-glow > * {
    position: relative;
    z-index: 1;
  }

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

  /* ═══ 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;
  }
  .tollerud-accent-bar--inline {
    margin: 0;
  }

  /* ═══ Range slider ═══ */
  .tollerud-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: var(--muted);
    outline: none;
  }
  .tollerud-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--tollerud-yellow);
    border: 2px solid var(--card);
    cursor: pointer;
    box-shadow: 0 0 0 1px var(--border);
  }
  .tollerud-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--tollerud-yellow);
    border: 2px solid var(--card);
    cursor: pointer;
  }

  /* ═══ Form row (settings layout) ═══ */
  .tollerud-formrow {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
  }
  .tollerud-formrow:last-child {
    border-bottom: none;
  }
  .tollerud-formrow__title {
    font-size: 14px;
    font-weight: 500;
    color: var(--foreground);
  }
  .tollerud-formrow__hint {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 3px;
    line-height: 1.45;
    max-width: 46ch;
  }
  .tollerud-formrow__control {
    justify-self: end;
  }
  @media (max-width: 560px) {
    .tollerud-formrow {
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .tollerud-formrow__control {
      justify-self: start;
    }
  }

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

  /* ═══ 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; }
  }

  /* ═══ Spinner ═══ */
  .tollerud-spinner {
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: tollerud-spinner .7s linear infinite;
    vertical-align: -2px;
  }
  @keyframes tollerud-spinner {
    to { transform: rotate(360deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .tollerud-spinner { animation-duration: 1.6s; }
  }

  /* ═══ Empty state ═══ */
  .tollerud-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 0.375rem);
    background: var(--card);
  }
  .tollerud-empty[data-compact="true"] { padding: 26px 20px; }
  .tollerud-empty[data-accent="true"] {
    border-color: color-mix(in srgb, var(--tollerud-yellow) 40%, var(--border));
    background: color-mix(in srgb, var(--tollerud-yellow) 5%, var(--card));
  }
  .tollerud-empty__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 10px;
    border-radius: 9999px;
    background: var(--muted);
    color: var(--text-muted);
  }
  .tollerud-empty[data-compact="true"] .tollerud-empty__icon {
    width: 40px;
    height: 40px;
    margin-bottom: 6px;
  }
  .tollerud-empty__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--foreground);
  }
  .tollerud-empty__desc {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-muted);
    max-width: 340px;
    margin: 2px 0 0;
  }

  /* ═══ Toast (useToast / ToastProvider) ═══ */
  .tollerud-toaster {
    position: fixed;
    bottom: 22px;
    right: 22px;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 400px;
    width: min(400px, calc(100vw - 44px));
  }
  .tollerud-toast {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px 18px;
    background: var(--surface-overlay);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 0.375rem);
    box-shadow: var(--shadow-lg);
    animation: tollerud-toast-in .25s var(--motion-ease-out);
  }
  @keyframes tollerud-toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
  }
  .tollerud-toast__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
  }
  .tollerud-toast__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--foreground);
    line-height: 1.35;
  }
  .tollerud-toast__msg {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 3px;
    line-height: 1.45;
  }
  .tollerud-toast__dismiss {
    flex-shrink: 0;
    padding: 3px;
    color: var(--text-muted);
    border-radius: var(--radius-sm, 0.25rem);
    transition: color 150ms ease;
  }
  .tollerud-toast__dismiss:hover {
    color: var(--foreground);
  }
  @media (prefers-reduced-motion: reduce) {
    .tollerud-toast { animation: none; }
  }

  /* ═══ 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;
  }

  /* Animated yellow sweep clipped to text — pair with .tollerud-display on dark surfaces */
  .tollerud-display-shimmer {
    background: linear-gradient(
      100deg,
      var(--tollerud-yellow) 32%,
      var(--tollerud-shimmer-highlight) 50%,
      var(--tollerud-yellow) 68%
    );
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: tollerud-display-shimmer 5s linear infinite;
  }
  @keyframes tollerud-display-shimmer {
    to { background-position: -220% 0; }
  }

  /* ═══ 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;
  }
  .tollerud-timeline__dot--online {
    background: var(--success);
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
  }
  .tollerud-timeline__dot--warning {
    background: var(--tollerud-yellow);
    box-shadow: 0 0 6px rgba(232, 213, 0, 0.5);
  }
  .tollerud-timeline__dot--offline {
    background: var(--destructive);
  }
  .tollerud-timeline__dot--idle {
    background: var(--tollerud-noir-400);
  }
  .tollerud-timeline__dot--info {
    background: var(--tollerud-info);
    box-shadow: 0 0 6px rgba(59, 130, 246, 0.5);
  }
  .tollerud-timeline--flat .tollerud-timeline__item {
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
  }
  .tollerud-timeline--flat .tollerud-timeline__item:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
  }
  .tollerud-timeline__time--below {
    margin-top: 0.125rem;
  }
  @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;
  }

  /* ═══ Sheet / Drawer ═══ */
  .tollerud-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  /* TopNav mobile menu — scrim below the sticky header only (keeps bar at full brightness) */
  .tollerud-topnav-menu-overlay {
    position: fixed;
    inset: 3.5rem 0 0;
    z-index: var(--z-modal);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  /* TopNav's desktop flyout panels are positioned by Floating UI (lib/floating-dropdown.tsx),
     the same engine behind Combobox/Select — see components/TopNav.tsx's TopNavFlyoutGroup.
     Radix NavigationMenu's own Viewport centers content under the whole nav bar rather than
     the trigger that opened it, which no longer matches this component's markup. */

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

  .tollerud-datatable-scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
  .tollerud-datatable-scroll:focus-visible {
    outline: 2px solid var(--tollerud-yellow);
    outline-offset: 2px;
  }

  .tollerud-scroll-rail {
    container-type: inline-size;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
  .tollerud-scroll-rail:focus-visible {
    outline: 2px solid var(--tollerud-yellow);
    outline-offset: 2px;
  }
}

@layer utilities {
  /* ═══ Text utilities ═══ */
  .text-balance { text-wrap: balance; }

}

/* ═══════════════════════════════════════════════
   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.
   ═══════════════════════════════════════════════ */

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