.color-custom-drawer,
    .color-custom-drawer .text-block {
      /* Background */
      --color-background: #f9f8f3;
      --color-background-rgb: 249 248 243;

      /* Opacity values adjusted for background brightness */
      
--opacity-5-15: 0.05; --opacity-10-25: 0.1; --opacity-35-55: 0.35; --opacity-40-60:
0.4; --opacity-30-60: 0.3; --opacity-60: 0.6;


      
        /* Foreground / text — explicit or smart-contrasted */
        --color: #151615;
        --color-rgb: 21 22 21;
        --color-foreground: #151615;
        --color-foreground-rgb: 21 22 21;
        --color-foreground-muted: rgb(21 22 21 / var(--opacity-muted-text));
        --color-foreground-subdued: rgb(21 22 21 / var(--opacity-subdued-text));
        --color-border: #d6d5ce;
        --color-border-rgb: 214 213 206;
      
    }

    
      .color-custom-drawer {
        /* Form-related tokens stay on .color-custom only — .text-block is a prose
           container (text/announcement/inline-text/blog-post-description/
           collection-link/price/sku) and never holds form inputs. */
        --input-disabled-background-color: rgb(21 22 21 / var(--opacity-10));
        --input-disabled-border-color: rgb(21 22 21 / var(--opacity-5));
        --input-disabled-text-color: rgb(21 22 21 / var(--opacity-50));
        --checkbox-border: 1px solid rgb(21 22 21 / var(--opacity-35-55));
      }
    

    .color-custom-drawer {
      color: var(--color, var(--color-foreground));
      background-color: var(--color-background);
    }