/* ========================================
   SEAN'S DESIGN LANGUAGE v1.0
   ========================================
   
   Foundation: TFH editorial monochrome
   Accent: Art Deco geometric hints
   Palette: Cool silver (#9CA3AF)
   
   Table of Contents:
   1. Design Tokens
   2. Typography
   3. Dividers & Lines (Art Deco)
   4. Geometric Status Indicators
   5. Buttons
   6. Cards
   7. Badges
   8. Form Elements
   9. Utilities
   10. Appearance Toggle
   ======================================== */

/* ========================================
   1. DESIGN TOKENS
   ======================================== */
:root {
  color-scheme: light;
  /* Monochrome Palette (TFH-derived) */
  --ourb-black: #000000;
  --ourb-white: #FFFFFF;
  --ourb-grey-900: #1A1A1A;
  --ourb-grey-800: #333333;
  --ourb-grey-700: #4A4A4A;
  --ourb-grey-600: #666666;
  --ourb-grey-500: #808080;
  --ourb-grey-400: #9CA3AF;  /* Cool silver accent */
  --ourb-grey-300: #B7B7B7;  /* TFH signature grey */
  --ourb-grey-200: #D1D5DB;
  --ourb-grey-100: #EBEBEB;
  --ourb-grey-50: #F7F7F8;
  --ourb-grey-25: #FAFAFA;
  
  /* Accent: Cool Silver (default) */
  --ourb-accent: #9CA3AF;
  --ourb-accent-light: #D1D5DB;
  --ourb-accent-dark: #6B7280;
  
  /* Semantic (via geometry, not color) */
  --ourb-success: var(--ourb-grey-900);
  --ourb-warning: var(--ourb-grey-900);
  --ourb-error: var(--ourb-grey-900);
  --ourb-info: var(--ourb-grey-900);
  /* Semantic text (error/warning) — tuned per theme below */
  --ourb-semantic-error: #b91c1c;
  --ourb-semantic-warning: #b45309;
  /* Brass swatch in theme toggle (identity color, not flipped with surface tokens) */
  --ourb-brass-mid: #b8a888;

  /* Typography */
  --ourb-font-primary: "acumin-pro", "Inter", system-ui, -apple-system, sans-serif;
  --ourb-font-display: "acumin-pro-wide", "Inter Tight", var(--ourb-font-primary);
  
  /* Type Scale */
  --ourb-text-xs: 0.75rem;     /* 12px */
  --ourb-text-sm: 0.8125rem;   /* 13px */
  --ourb-text-base: 0.9375rem; /* 15px */
  --ourb-text-lg: 1.125rem;    /* 18px */
  --ourb-text-xl: 1.25rem;     /* 20px */
  --ourb-text-2xl: 1.5rem;     /* 24px */
  --ourb-text-3xl: 2rem;       /* 32px */
  --ourb-text-4xl: 2.5rem;     /* 40px */
  
  /* Line Heights */
  --ourb-leading-tight: 1.15;
  --ourb-leading-snug: 1.25;
  --ourb-leading-normal: 1.4;
  --ourb-leading-relaxed: 1.5;
  
  /* Letter Spacing */
  --ourb-tracking-tight: -0.02em;
  --ourb-tracking-normal: 0;
  --ourb-tracking-wide: 0.025em;
  --ourb-tracking-wider: 0.05em;
  
  /* Spacing (8px base) */
  --ourb-space-1: 0.25rem;   /* 4px */
  --ourb-space-2: 0.5rem;    /* 8px */
  --ourb-space-3: 0.75rem;   /* 12px */
  --ourb-space-4: 1rem;      /* 16px */
  --ourb-space-5: 1.25rem;   /* 20px */
  --ourb-space-6: 1.5rem;    /* 24px */
  --ourb-space-8: 2rem;      /* 32px */
  --ourb-space-10: 2.5rem;   /* 40px */
  --ourb-space-12: 3rem;     /* 48px */
  --ourb-space-16: 4rem;     /* 64px */
  
  /* Borders */
  --ourb-border-thin: 1px;
  --ourb-border-medium: 2px;
  --ourb-border-color: var(--ourb-grey-300);
  
  /* Radius - Subtle, not bubbly */
  --ourb-radius-none: 0;
  --ourb-radius-sm: 2px;
  --ourb-radius-md: 4px;
  --ourb-radius-lg: 6px;
  --ourb-radius-xl: 14px;
  --ourb-radius-2xl: 28px;
  --ourb-radius-chat-pill: 22px;

  /* Focus / composer rings (theme-aware; avoids hardcoded rgba in app CSS) */
  --ourb-ring-focus-outer: color-mix(in srgb, var(--ourb-black) 7%, transparent);
  --ourb-ring-sending: color-mix(in srgb, var(--ourb-accent) 22%, transparent);

  /* Verification / warning callout (e.g. copilot disclaimer) */
  --ourb-callout-warning-bg: #fffbeb;
  --ourb-callout-warning-border: #fcd34d;
  --ourb-callout-warning-accent: #f59e0b;
  --ourb-callout-warning-text: #92400e;
  --ourb-callout-warning-btn-border: #d97706;
  --ourb-callout-warning-btn-hover: #fef3c7;
  --ourb-callout-warning-focus: #f59e0b;

  /* Explicit feedback hues (thumbs, etc.) */
  --ourb-feedback-positive: #16a34a;
  --ourb-feedback-negative: #dc2626;

  /* Shadows - Minimal */
  --ourb-shadow-none: none;
  --ourb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --ourb-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.06);
  
  /* Transitions */
  --ourb-transition-fast: 150ms ease;
  --ourb-transition-base: 250ms ease;
  --ourb-transition-slow: 400ms ease;
}

/* Warm Brass Theme Variant */
/* Warm Brass Theme */
[data-theme="warm-brass"] {
  --ourb-accent: #B8A888;
  --ourb-accent-light: #D4C9B0;
  --ourb-accent-dark: #9A8B6F;
  --ourb-grey-400: #B8A888;
}

/* Dark Mode */
[data-theme="dark"] {
  color-scheme: dark;
  --ourb-black: #FFFFFF;
  --ourb-white: #0A0A0A;
  --ourb-grey-900: #F5F5F5;
  --ourb-grey-800: #E5E5E5;
  --ourb-grey-700: #D4D4D4;
  --ourb-grey-600: #A3A3A3;
  --ourb-grey-500: #737373;
  --ourb-grey-400: #9CA3AF;
  --ourb-grey-300: #525252;
  --ourb-grey-200: #404040;
  --ourb-grey-100: #262626;
  --ourb-grey-50: #171717;
  --ourb-grey-25: #0F0F0F;
  --ourb-border-color: var(--ourb-grey-200);
  --ourb-semantic-error: #f87171;
  --ourb-semantic-warning: #fbbf24;
  --ourb-ring-focus-outer: color-mix(in srgb, var(--ourb-white) 14%, transparent);
  --ourb-callout-warning-bg: #1c1917;
  --ourb-callout-warning-border: #78350f;
  --ourb-callout-warning-accent: #f59e0b;
  --ourb-callout-warning-text: #fde68a;
  --ourb-callout-warning-btn-border: #d97706;
  --ourb-callout-warning-btn-hover: #422006;
  --ourb-callout-warning-focus: #fbbf24;
  --ourb-feedback-positive: #4ade80;
  --ourb-feedback-negative: #f87171;
}

/* Dark Mode + Warm Brass */
[data-theme="dark-brass"] {
  color-scheme: dark;
  --ourb-black: #FFFFFF;
  --ourb-white: #0A0A0A;
  --ourb-grey-900: #F5F5F5;
  --ourb-grey-800: #E5E5E5;
  --ourb-grey-700: #D4D4D4;
  --ourb-grey-600: #A3A3A3;
  --ourb-grey-500: #737373;
  --ourb-grey-400: #B8A888;
  --ourb-grey-300: #525252;
  --ourb-grey-200: #404040;
  --ourb-grey-100: #262626;
  --ourb-grey-50: #171717;
  --ourb-grey-25: #0F0F0F;
  --ourb-accent: #B8A888;
  --ourb-accent-light: #D4C9B0;
  --ourb-accent-dark: #9A8B6F;
  --ourb-border-color: var(--ourb-grey-200);
  --ourb-semantic-error: #f87171;
  --ourb-semantic-warning: #fbbf24;
  --ourb-ring-focus-outer: color-mix(in srgb, var(--ourb-white) 14%, transparent);
  --ourb-callout-warning-bg: #1c1917;
  --ourb-callout-warning-border: #78350f;
  --ourb-callout-warning-accent: #f59e0b;
  --ourb-callout-warning-text: #fde68a;
  --ourb-callout-warning-btn-border: #d97706;
  --ourb-callout-warning-btn-hover: #422006;
  --ourb-callout-warning-focus: #fbbf24;
  --ourb-feedback-positive: #4ade80;
  --ourb-feedback-negative: #f87171;
}

/* ========================================
   2. TYPOGRAPHY
   ======================================== */

/* Display - Large headlines */
.ourb-display {
  font-family: var(--ourb-font-display);
  font-size: var(--ourb-text-4xl);
  font-weight: 500;
  line-height: var(--ourb-leading-tight);
  letter-spacing: var(--ourb-tracking-tight);
  color: var(--ourb-black);
}

/* H1 */
.ourb-h1 {
  font-family: var(--ourb-font-primary);
  font-size: var(--ourb-text-3xl);
  font-weight: 500;
  line-height: var(--ourb-leading-tight);
  letter-spacing: var(--ourb-tracking-tight);
  color: var(--ourb-black);
}

/* H2 */
.ourb-h2 {
  font-family: var(--ourb-font-primary);
  font-size: var(--ourb-text-2xl);
  font-weight: 500;
  line-height: var(--ourb-leading-snug);
  letter-spacing: var(--ourb-tracking-tight);
  color: var(--ourb-black);
}

/* H3 */
.ourb-h3 {
  font-family: var(--ourb-font-primary);
  font-size: var(--ourb-text-xl);
  font-weight: 500;
  line-height: var(--ourb-leading-snug);
  color: var(--ourb-black);
}

/* H4 */
.ourb-h4 {
  font-family: var(--ourb-font-primary);
  font-size: var(--ourb-text-lg);
  font-weight: 500;
  line-height: var(--ourb-leading-normal);
  color: var(--ourb-black);
}

/* Body */
.ourb-body {
  font-family: var(--ourb-font-primary);
  font-size: var(--ourb-text-base);
  font-weight: 400;
  line-height: var(--ourb-leading-normal);
  color: var(--ourb-grey-700);
}

/* Body Small */
.ourb-body-sm {
  font-family: var(--ourb-font-primary);
  font-size: var(--ourb-text-sm);
  font-weight: 400;
  line-height: var(--ourb-leading-normal);
  color: var(--ourb-grey-600);
}

/* Caption */
.ourb-caption {
  font-family: var(--ourb-font-primary);
  font-size: var(--ourb-text-xs);
  font-weight: 400;
  line-height: var(--ourb-leading-normal);
  letter-spacing: var(--ourb-tracking-wide);
  color: var(--ourb-grey-500);
}

/* Label - All caps, tracking */
.ourb-label {
  font-family: var(--ourb-font-primary);
  font-size: var(--ourb-text-xs);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ourb-tracking-wider);
  text-transform: uppercase;
  color: var(--ourb-grey-500);
}

/* Muted text */
.ourb-muted {
  color: var(--ourb-grey-300);
}

.ourb-text-error {
  color: var(--ourb-semantic-error);
}

.ourb-text-warning {
  color: var(--ourb-semantic-warning);
}

/* ========================================
   3. DIVIDERS & LINES (Art Deco)
   ======================================== */

/* Basic horizontal divider (TFH signature) */
.ourb-divider {
  width: 100%;
  height: var(--ourb-border-thin);
  background: var(--ourb-grey-300);
  border: none;
  margin: var(--ourb-space-6) 0;
}

/* Divider with subtle Art Deco chevron center */
.ourb-divider-chevron {
  position: relative;
  width: 100%;
  height: var(--ourb-border-thin);
  background: var(--ourb-grey-300);
  border: none;
  margin: var(--ourb-space-6) 0;
}

.ourb-divider-chevron::before {
  content: "‹›";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--ourb-white);
  padding: 0 var(--ourb-space-3);
  font-size: var(--ourb-text-sm);
  color: var(--ourb-grey-300);
  letter-spacing: -0.1em;
}

/* Double line divider (Art Deco) */
.ourb-divider-double {
  width: 100%;
  height: 5px;
  border: none;
  margin: var(--ourb-space-6) 0;
  background: 
    linear-gradient(
      to bottom,
      var(--ourb-grey-300) 0px,
      var(--ourb-grey-300) 1px,
      transparent 1px,
      transparent 4px,
      var(--ourb-grey-300) 4px,
      var(--ourb-grey-300) 5px
    );
}

/* Vertical divider */
.ourb-divider-vertical {
  width: var(--ourb-border-thin);
  height: 100%;
  background: var(--ourb-grey-300);
  border: none;
}

/* Section label with line (TFH "T — 01" pattern) */
.ourb-section-label {
  display: flex;
  align-items: center;
  gap: var(--ourb-space-4);
  margin-bottom: var(--ourb-space-4);
}

.ourb-section-label span {
  font-family: var(--ourb-font-primary);
  font-size: var(--ourb-text-sm);
  font-weight: 400;
  color: var(--ourb-grey-500);
  white-space: nowrap;
}

.ourb-section-label::after {
  content: "";
  flex: 1;
  height: var(--ourb-border-thin);
  background: var(--ourb-grey-300);
}

/* ========================================
   4. GEOMETRIC STATUS INDICATORS
   ======================================== */

/* Base indicator style */
.ourb-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  font-size: var(--ourb-text-sm);
  line-height: 1;
}

/* Diamond ◇ = Success/Verified */
.ourb-indicator-success::before {
  content: "◇";
  color: var(--ourb-black);
}

.ourb-indicator-success.filled::before {
  content: "◆";
}

/* Triangle △ = Warning/Attention */
.ourb-indicator-warning::before {
  content: "△";
  color: var(--ourb-black);
}

.ourb-indicator-warning.filled::before {
  content: "▲";
}

/* Square □ = Neutral/Info */
.ourb-indicator-info::before {
  content: "□";
  color: var(--ourb-black);
}

.ourb-indicator-info.filled::before {
  content: "■";
}

/* Circle ○ = Processing/Pending */
.ourb-indicator-pending::before {
  content: "○";
  color: var(--ourb-grey-400);
}

.ourb-indicator-pending.filled::before {
  content: "●";
}

/* Status with label */
.ourb-status {
  display: inline-flex;
  align-items: center;
  gap: var(--ourb-space-2);
  font-family: var(--ourb-font-primary);
  font-size: var(--ourb-text-sm);
  color: var(--ourb-grey-700);
}

.ourb-status-shape {
  font-size: 0.875em;
}

/* ========================================
   5. BUTTONS
   ======================================== */

/* Base button */
.ourb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ourb-space-2);
  padding: var(--ourb-space-3) var(--ourb-space-5);
  font-family: var(--ourb-font-primary);
  font-size: var(--ourb-text-sm);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  border: var(--ourb-border-thin) solid transparent;
  border-radius: var(--ourb-radius-sm);
  cursor: pointer;
  transition: all var(--ourb-transition-fast);
}

.ourb-btn:focus-visible {
  outline: 2px solid var(--ourb-accent);
  outline-offset: 2px;
}

/* Primary - Black fill */
.ourb-btn-primary {
  background: var(--ourb-black);
  color: var(--ourb-white);
  border-color: var(--ourb-black);
}

.ourb-btn-primary:hover {
  background: var(--ourb-grey-800);
  border-color: var(--ourb-grey-800);
}

/* Secondary - Black outline */
.ourb-btn-secondary {
  background: transparent;
  color: var(--ourb-black);
  border-color: var(--ourb-black);
}

.ourb-btn-secondary:hover {
  background: var(--ourb-black);
  color: var(--ourb-white);
}

/* Ghost - Minimal */
.ourb-btn-ghost {
  background: transparent;
  color: var(--ourb-grey-600);
  border-color: transparent;
}

.ourb-btn-ghost:hover {
  color: var(--ourb-black);
  background: var(--ourb-grey-50);
}

/* Button with geometric arrow (Art Deco touch) */
.ourb-btn-arrow::after {
  content: "→";
  transition: transform var(--ourb-transition-fast);
}

.ourb-btn-arrow:hover::after {
  transform: translateX(3px);
}

/* Small button */
.ourb-btn-sm {
  padding: var(--ourb-space-2) var(--ourb-space-4);
  font-size: var(--ourb-text-xs);
}

/* Large button */
.ourb-btn-lg {
  padding: var(--ourb-space-4) var(--ourb-space-6);
  font-size: var(--ourb-text-base);
}

/* ========================================
   6. CARDS
   ======================================== */

/* Base card */
.ourb-card {
  background: var(--ourb-white);
  border: var(--ourb-border-thin) solid var(--ourb-grey-100);
  border-radius: var(--ourb-radius-md);
  padding: var(--ourb-space-6);
}

/* Card with Art Deco stepped corner (subtle) */
.ourb-card-stepped {
  background: var(--ourb-white);
  border: var(--ourb-border-thin) solid var(--ourb-grey-200);
  padding: var(--ourb-space-6);
  position: relative;
  clip-path: polygon(
    0 0,
    calc(100% - 12px) 0,
    100% 12px,
    100% 100%,
    12px 100%,
    0 calc(100% - 12px)
  );
}

/* Card with top accent line */
.ourb-card-accent {
  background: var(--ourb-white);
  border: var(--ourb-border-thin) solid var(--ourb-grey-100);
  border-top: 2px solid var(--ourb-accent);
  border-radius: var(--ourb-radius-sm);
  padding: var(--ourb-space-6);
}

/* Card header */
.ourb-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--ourb-space-4);
  padding-bottom: var(--ourb-space-4);
  border-bottom: var(--ourb-border-thin) solid var(--ourb-grey-100);
}

.ourb-card-title {
  font-family: var(--ourb-font-primary);
  font-size: var(--ourb-text-lg);
  font-weight: 500;
  color: var(--ourb-black);
  margin: 0;
}

.ourb-card-subtitle {
  font-family: var(--ourb-font-primary);
  font-size: var(--ourb-text-sm);
  color: var(--ourb-grey-500);
  margin: var(--ourb-space-1) 0 0 0;
}

/* Card body */
.ourb-card-body {
  font-family: var(--ourb-font-primary);
  font-size: var(--ourb-text-base);
  color: var(--ourb-grey-700);
  line-height: var(--ourb-leading-normal);
}

/* Card footer */
.ourb-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--ourb-space-4);
  padding-top: var(--ourb-space-4);
  border-top: var(--ourb-border-thin) solid var(--ourb-grey-100);
}

/* ========================================
   7. BADGES
   ======================================== */

/* Base badge */
.ourb-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ourb-space-1);
  padding: var(--ourb-space-1) var(--ourb-space-2);
  font-family: var(--ourb-font-primary);
  font-size: var(--ourb-text-xs);
  font-weight: 500;
  line-height: 1;
  border-radius: var(--ourb-radius-sm);
}

/* Default badge - subtle grey */
.ourb-badge-default {
  background: var(--ourb-grey-100);
  color: var(--ourb-grey-700);
}

/* Outline badge */
.ourb-badge-outline {
  background: transparent;
  color: var(--ourb-grey-600);
  border: var(--ourb-border-thin) solid var(--ourb-grey-300);
}

/* Accent badge - cool silver */
.ourb-badge-accent {
  background: var(--ourb-accent);
  color: var(--ourb-white);
}

/* Badge with geometric prefix */
.ourb-badge-geo::before {
  font-size: 0.9em;
  margin-right: var(--ourb-space-1);
}

.ourb-badge-geo.success::before { content: "◆"; }
.ourb-badge-geo.warning::before { content: "▲"; }
.ourb-badge-geo.info::before { content: "■"; }
.ourb-badge-geo.pending::before { content: "●"; }

/* ========================================
   8. FORM ELEMENTS
   ======================================== */

/* Input */
.ourb-input {
  width: 100%;
  padding: var(--ourb-space-3) var(--ourb-space-4);
  font-family: var(--ourb-font-primary);
  font-size: var(--ourb-text-base);
  color: var(--ourb-black);
  background: var(--ourb-white);
  border: var(--ourb-border-thin) solid var(--ourb-grey-200);
  border-radius: var(--ourb-radius-sm);
  transition: border-color var(--ourb-transition-fast);
}

.ourb-input::placeholder {
  color: var(--ourb-grey-400);
}

.ourb-input:focus {
  outline: none;
  border-color: var(--ourb-accent);
}

/* Textarea */
.ourb-textarea {
  width: 100%;
  min-height: 100px;
  padding: var(--ourb-space-3) var(--ourb-space-4);
  font-family: var(--ourb-font-primary);
  font-size: var(--ourb-text-base);
  color: var(--ourb-black);
  background: var(--ourb-white);
  border: var(--ourb-border-thin) solid var(--ourb-grey-200);
  border-radius: var(--ourb-radius-sm);
  resize: vertical;
  transition: border-color var(--ourb-transition-fast);
}

.ourb-textarea:focus {
  outline: none;
  border-color: var(--ourb-accent);
}

/* Label */
.ourb-form-label {
  display: block;
  margin-bottom: var(--ourb-space-2);
  font-family: var(--ourb-font-primary);
  font-size: var(--ourb-text-sm);
  font-weight: 500;
  color: var(--ourb-grey-700);
}

/* ========================================
   9. UTILITIES
   ======================================== */

/* Text alignment */
.ourb-text-left { text-align: left; }
.ourb-text-center { text-align: center; }
.ourb-text-right { text-align: right; }

/* Flex utilities */
.ourb-flex { display: flex; }
.ourb-flex-col { flex-direction: column; }
.ourb-items-center { align-items: center; }
.ourb-justify-between { justify-content: space-between; }
.ourb-gap-2 { gap: var(--ourb-space-2); }
.ourb-gap-4 { gap: var(--ourb-space-4); }
.ourb-gap-6 { gap: var(--ourb-space-6); }

/* Spacing utilities */
.ourb-mt-4 { margin-top: var(--ourb-space-4); }
.ourb-mt-6 { margin-top: var(--ourb-space-6); }
.ourb-mt-8 { margin-top: var(--ourb-space-8); }
.ourb-mb-4 { margin-bottom: var(--ourb-space-4); }
.ourb-mb-6 { margin-bottom: var(--ourb-space-6); }
.ourb-p-4 { padding: var(--ourb-space-4); }
.ourb-p-6 { padding: var(--ourb-space-6); }

/* Background */
.ourb-bg-white { background: var(--ourb-white); }
.ourb-bg-grey-25 { background: var(--ourb-grey-25); }
.ourb-bg-grey-50 { background: var(--ourb-grey-50); }

/* Animation - Line reveal (TFH style) */
@keyframes ourb-line-reveal {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.ourb-animate-line {
  transform-origin: left;
  animation: ourb-line-reveal 0.6s ease-out forwards;
}

/* Animation - Fade in */
@keyframes ourb-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.ourb-animate-fade {
  animation: ourb-fade-in 0.4s ease-out forwards;
}

/* ========================================
   10. APPEARANCE TOGGLE
   ======================================== */

.ourb-toggle-group {
  display: inline-flex;
  background: var(--ourb-grey-100);
  border: 1px solid var(--ourb-grey-200);
  border-radius: var(--ourb-radius-md);
  overflow: hidden;
}

.ourb-toggle-btn {
  padding: var(--ourb-space-2) var(--ourb-space-4);
  font-family: var(--ourb-font-primary);
  font-size: var(--ourb-text-sm);
  font-weight: 500;
  border: none;
  background: transparent;
  color: var(--ourb-grey-500);
  cursor: pointer;
  transition: all var(--ourb-transition-fast);
  display: flex;
  align-items: center;
  gap: var(--ourb-space-2);
}

.ourb-toggle-btn:hover {
  color: var(--ourb-grey-700);
}

.ourb-toggle-btn.active {
  background: var(--ourb-black);
  color: var(--ourb-white);
}

.ourb-toggle-btn .icon {
  font-size: 1em;
}

.ourb-toggle-btn .swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.ourb-toggle-btn .swatch-silver {
  background: var(--ourb-grey-400);
}

.ourb-toggle-btn .swatch-brass {
  background: var(--ourb-brass-mid);
}

[data-theme="dark"] .ourb-toggle-group,
[data-theme="dark-brass"] .ourb-toggle-group {
  background: var(--ourb-grey-100);
  border-color: var(--ourb-grey-200);
}

[data-theme="dark"] .ourb-toggle-btn.active,
[data-theme="dark-brass"] .ourb-toggle-btn.active {
  background: var(--ourb-white);
  color: var(--ourb-black);
}

[data-theme="dark"] .ourb-toggle-btn .swatch,
[data-theme="dark-brass"] .ourb-toggle-btn .swatch {
  border-color: color-mix(in srgb, var(--ourb-white) 14%, transparent);
}