/* Stacksift brand — light surfaces, navy ink, teal accent.
   .demo / .api-block / .readout stay a dark product device. */
:root {
  --ink:             #0B132B;
  --background:      #F4F6FA;
  --background-2:    #EAEFF6;
  --card:            #FFFFFF;
  --card-2:          #F8FAFC;
  --card-3:          #E8EEF6;
  --border:          #D5DEEA;
  --border-soft:     #E6ECF4;

  --foreground:      #0B132B;
  --foreground-2:    #3D4A63;
  --foreground-3:    #5C6B82;
  --foreground-4:    #8B98AD;

  --primary:         #0F6F70;
  --primary-2:       #148A8B;
  --primary-soft:    rgba(15, 111, 112, 0.10);
  --primary-line:    rgba(15, 111, 112, 0.28);

  --accent:          #0F7A7B;
  --accent-2:        #129394;
  --accent-soft:     rgba(15, 122, 123, 0.10);
  --accent-line:     rgba(15, 122, 123, 0.30);

  --cta:             #0F7A7B;
  --cta-2:           #0C6364;
  --cta-fg:          #FFFFFF;
  --cta-soft:        rgba(15, 122, 123, 0.10);
  --cta-line:        rgba(15, 122, 123, 0.32);
  --on-accent:       #FFFFFF;
  --success:         #15803D;

  --warn:            #B45309;
  --warn-soft:       rgba(180, 83, 9, 0.10);
  --error:           #DC2626;
  --error-soft:      rgba(220, 38, 38, 0.08);

  --radius:          0.75rem;
  --radius-sm:       0.5rem;
  --shadow:          0 1px 2px rgba(11, 19, 43, 0.04), 0 8px 24px rgba(11, 19, 43, 0.06);
  --shadow-lg:       0 16px 40px -12px rgba(11, 19, 43, 0.14);

  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: 'Poppins', 'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

.demo,
.api-block,
.readout,
.readout-like {
  --background:      #0B132B;
  --background-2:    #121C38;
  --card:            #14213D;
  --card-2:          #1A2848;
  --card-3:          #233258;
  --border:          #2E3C5E;
  --border-soft:     #243250;
  --foreground:      #F1F5F9;
  --foreground-2:    #D5DEEA;
  --foreground-3:    #94A3B8;
  --foreground-4:    #7B8BA3;
  --primary:         #2A9999;
  --primary-2:       #4DDFDF;
  --accent:          #2DD4D4;
  --accent-2:        #5EEAD4;
  --accent-soft:     rgba(45, 212, 212, 0.14);
  --accent-line:     rgba(45, 212, 212, 0.38);
  --cta:             #2DD4D4;
  --cta-2:           #5EEAD4;
  --cta-fg:          #0B132B;
  --cta-soft:        rgba(45, 212, 212, 0.14);
  --cta-line:        rgba(45, 212, 212, 0.4);
  --warn:            #FBBF24;
  --warn-soft:       rgba(251, 191, 36, 0.14);
  --error:           #F87171;
  --error-soft:      rgba(248, 113, 113, 0.12);
  color: var(--foreground);
}

.card {
  box-shadow: var(--shadow);
}

.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  vertical-align: middle;
}
.brand-mark::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.95);
}
.brand-mark::before {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  z-index: 2;
}
.brand-mark.sm {
  width: 22px;
  height: 22px;
}
.brand-mark.sm::after {
  inset: 4px;
  border-width: 1.2px;
}
.brand-mark.sm::before {
  width: 4px;
  height: 4px;
}