:root {
    /* Dark structure (neutral, not brown) */
    --color-1: #f97316;   /* warm charcoal (headlines) */
    --color-2: #3a2a1d;   /* secondary dark */
    --color-3: #1f160f;   /* primary body text */
    --color-4: #6b5b4c;   /* secondary text */

    /* Warm light surfaces (orange-adjacent, very subtle) */
    --color-5: #ffffff;
    --color-6: #f6f6f6;   /* light orange-cream */
    --color-7: #fde8d3;   /* soft warm surface */
    --color-8: rgba(31, 22, 15, 0.08);

    /* Accents */
    --color-9: #fb923c;   /* soft secondary orange */
    --color-10: #f97316;  /* primary brand orange */

    /* Muted support */
    --color-11: #9a8774;  /* warm muted text */
    --color-12: #f6f6f6;  /* hero / section background */
    
    /* Buttons */
    --button-color-primary: #f97316;
    --button-color-primary-hover: #ff7b1f;
    --button-color-primary-text: #FFFFFF;
    --button-color-primary-border: #f97316;
    --button-color-primary-hover-border: #ff7b1f;
    --button-color-outline-bg: transparent;
    --button-color-outline-text: #f97316;
    --button-color-outline-border: #f97315;
    --button-color-outline-hover-bg: rgb(246 235 228);
    --button-color-outline-hover-text: #f97315;
    --button-color-outline-hover-border: #f97315;
    /* Sections */
    --section-divider-line-light: #e1e1e1;
    --section-divider-line-dark: #dadada;


    /* Problem items */
    --problem-item-bg: #ffffff;
    --problem-item-border: #efefef;
    --problem-item-text-color: #3e3e3e;
    --problem-icon-bg: #f97315;
    --problem-icon-text-color: #FFFFFF;
    
    /* Use case items */
    --usecase-item-bg: #efefef;
    --usecase-item-border: #dfdfdf;
    --usecase-item-text-color: #3e3e3e;
    --usecase-icon-bg: #f97315;
    --usecase-icon-color: #FFFFFF;
}