:root {
    /* Brand */
    --apparel-green: #006838;
    --apparel-green-hover: #00552f;
    --apparel-green-dark: #004f2b;
    --apparel-green-deep: #003d22;
    --apparel-green-light: #16804e;
    --apparel-green-soft: #edf7f1;
    --apparel-green-muted: #dce9df;
    --apparel-green-overlay: rgba(0, 104, 56, 0.08);
    --apparel-green-overlay-hover: rgba(0, 104, 56, 0.10);
    /* Accent */
    --apparel-tan: #c1b49a;
    --apparel-tan-dark: #8f7e5f;
    --apparel-tan-soft: #f5f1e9;
    /* Text */
    --apparel-ink: #17231c;
    --apparel-muted: #5f6d64;
    --apparel-text-light: #7a857e;
    --apparel-on-primary: #ffffff;
    /* Surfaces */
    --apparel-background: #f5f6f4;
    --apparel-surface: #ffffff;
    --apparel-surface-alt: #f7f8f7;
    /* Borders and states */
    --apparel-border: #dce3de;
    --apparel-border-strong: #bcc8c0;
    --apparel-border-light: rgba(220, 227, 222, 0.8);
    --apparel-border-green: rgba(0, 104, 56, 0.10);
    --apparel-border-green-strong: rgba(0, 104, 56, 0.28);
    --apparel-divider: #e8ece8;
    --apparel-focus: #779486;
    --apparel-disabled: #789587;
    --apparel-disabled-background: #edf1ee;
    --apparel-danger: #9b3e34;
    --apparel-danger-soft: #fff1ef;
    --apparel-warning: #674e24;
    --apparel-warning-soft: #fff8e8;
    --apparel-selection-background: rgba(0, 104, 56, 0.08);
    --apparel-overlay-light: rgba(0, 0, 0, 0.015);
    --apparel-overlay-hover: rgba(0, 0, 0, 0.025);
    /* Shape and elevation */
    --apparel-radius-sm: 0.75rem;
    --apparel-radius-md: 1rem;
    --apparel-radius-lg: 1.4rem;
    --apparel-shadow-sm: 0 0.35rem 1rem rgba(17, 35, 24, 0.07);
    --apparel-shadow-md: 0 1rem 2.5rem rgba(17, 35, 24, 0.12);
    --apparel-shadow-lg: 0 1.4rem 3.5rem rgba(17, 35, 24, 0.17);
    --apparel-shadow-dialog: 0 1.5rem 4.5rem rgba(17, 35, 24, 0.22);
    --apparel-shadow-page: 0 22px 60px rgba(17, 35, 24, 0.08);
    --apparel-shadow-soft: 0 10px 30px rgba(17, 35, 24, 0.05);
    --apparel-shadow-hover: 0 16px 40px rgba(17, 35, 24, 0.10);
    --apparel-shadow-card-hover: 0 18px 45px rgba(17, 35, 24, 0.08);
    --apparel-shadow-brand: 0 8px 18px rgba(0, 104, 56, 0.18);
    --apparel-shadow-divider: 0 10px 24px rgba(17, 35, 24, 0.06);
    --apparel-shadow-selection: 0 4px 14px rgba(0, 0, 0, 0.06);
}