.inheritance-demo {
      --demo-bg: #ecf0f1;
      --demo-text: #2c3e50;
      --demo-border: #bdc3c7;
      background: var(--demo-bg);
      padding: 20px;
      border: 2px solid var(--demo-border);
      border-radius: 8px;
      color: var(--demo-text);
    }
    
    .inheritance-demo .parent {
      --demo-bg: #3498db;
      --demo-text: white;
      background: var(--demo-bg);
      color: var(--demo-text);
      padding: 15px;
      border-radius: 6px;
      margin: 10px 0;
    }
    
    .inheritance-demo .child {
      /* Inherits --demo-bg and --demo-text from parent */
      background: var(--demo-bg, #95a5a6);
      color: var(--demo-text, #333);
      padding: 10px;
      margin: 10px 0;
      border-radius: 4px;
      opacity: 0.9;
    }
    
    .inheritance-demo .child.override {
      --demo-bg: #e74c3c; /* Overrides inherited value */
    }