/* ═══════════════════════════════════════════════════════════════════════════════
   BRICK BY BRICK — Design Tokens v2
   White Limestone + Sage Green
   "Permanent infrastructure — built to last"
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Stone Palette (Structural) ── */
  --bxb-brick-deep:       #8A8D8A;
  --bxb-brick-mid:        #A8ABA8;
  --bxb-brick-light:      #C4C7C4;
  --bxb-brick-pale:       #D8DAD8;
  --bxb-brick-surface:    #E8E5E0;
  --bxb-brick-highlight:  #F0EDE8;

  /* ── Sage Green Accent ── */
  --bxb-accent:           #6BAF92;
  --bxb-accent-deep:      #3D7A5F;
  --bxb-accent-light:     #8FC4AA;
  --bxb-accent-pale:      #D4E8DC;

  /* ── MAIA Ecosystem Teal (connection points only) ── */
  --bxb-teal:             #4EEBC2;

  /* ── Parchment / Surface Palette ── */
  --bxb-parchment:        #F5F3EF;
  --bxb-parchment-warm:   #FAF8F5;
  --bxb-parchment-deep:   #EBE8E3;

  /* ── Mortar ── */
  --bxb-mortar:           #B8B4AE;
  --bxb-mortar-light:     #D0CCC6;

  /* ── Text Colors ── */
  --bxb-text-primary:     #2C2C2A;
  --bxb-text-secondary:   #4A4A46;
  --bxb-text-muted:       #7A7A74;
  --bxb-text-light:       #A0A09A;

  /* ── Signal Colors ── */
  --bxb-amber:            #D4A017;
  --bxb-amber-deep:       #A67C00;
  --bxb-coral:            #E07A5F;

  /* ── Spacing ── */
  --bxb-space-xs:   4px;
  --bxb-space-sm:   8px;
  --bxb-space-md:   16px;
  --bxb-space-lg:   24px;
  --bxb-space-xl:   32px;
  --bxb-space-2xl:  48px;

  /* ── Brick Frame Padding ── */
  --bxb-brick-padding:    18px;
  --bxb-mortar-gap:       6px;

  /* ── Border Radius ── */
  --bxb-radius-sm:   4px;
  --bxb-radius-md:   8px;
  --bxb-radius-lg:   12px;
  --bxb-radius-stone: 6px;  /* Rounded stone edges */

  /* ── Typography ── */
  --bxb-font-heading: 'Playfair Display', Georgia, serif;
  --bxb-font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --bxb-font-mono:    'JetBrains Mono', 'SF Mono', monospace;

  /* ── Shadows ── */
  --bxb-shadow-sm:   0 1px 3px rgba(44, 44, 42, 0.08);
  --bxb-shadow-md:   0 4px 12px rgba(44, 44, 42, 0.10);
  --bxb-shadow-lg:   0 8px 24px rgba(44, 44, 42, 0.12);
  --bxb-shadow-stone: 0 2px 6px rgba(44, 44, 42, 0.08), inset 0 1px 0 rgba(255,255,255,0.5);

  /* ── Transitions ── */
  --bxb-transition:  200ms ease;
  --bxb-transition-slow: 400ms ease;
}

/* ── Dark Mode ── */
@media (prefers-color-scheme: dark) {
  :root {
    --bxb-brick-surface:   #2A2926;
    --bxb-brick-highlight: #3A3835;
    --bxb-brick-deep:      #4A4845;
    --bxb-brick-mid:       #5A5855;
    --bxb-parchment:       #1E1D1B;
    --bxb-parchment-warm:  #252422;
    --bxb-parchment-deep:  #2A2926;
    --bxb-mortar:          #3A3835;
    --bxb-mortar-light:    #4A4845;
    --bxb-text-primary:    #E8E5E0;
    --bxb-text-secondary:  #D0CCC6;
    --bxb-text-muted:      #A0A09A;
    --bxb-text-light:      #7A7A74;
  }
}

/* ── Tablet ── */
@media (max-width: 1024px) {
  :root {
    --bxb-brick-padding: 14px;
  }
}

/* ── Mobile ── */
@media (max-width: 768px) {
  :root {
    --bxb-brick-padding: 8px;
  }
}