/* variables.css — brand design tokens, load before all other site CSS */

:root {

    /* greens */
    --brand-primary:        #1a6a48;  /* buttons, links, icons */
    --brand-primary-hover:  #155a3c;  /* hover / active state */
    --brand-dark:           #006837;  /* header bar, badges */
    --brand-darker:         #1a5b3b;  /* footer links, secondary borders */
    --brand-deep:           #004f29;  /* deep hover on dark elements */
    --brand-mid:            #138E52;  /* gradient midpoint */

    /* green tints — backgrounds & fills */
    --brand-tint-light:     #e8f5ee;  /* card hover bg, in-cart state */
    --brand-tint-lighter:   #f3faf6;  /* input focus bg */
    --brand-tint-pale:      #d1f2e0;  /* section bg */
    --brand-muted:          #3a4d34;  /* testimonial cards, earthy accents */
    --brand-muted-border:   #c8dbd2;  /* dividers, subtle borders */

    /* gold */
    --brand-gold:           #C19A6B;  /* premium badges, gradients */
    --brand-gold-dark:      #7B5903;  /* text on light gold, borders */
    --brand-gold-light:     #faf5ef;  /* gold tint bg */

    /* sale / deal accent */
    --brand-accent:         #ffb300;  /* sale badge, deal banner */
    --brand-accent-hot:     #ff6b1a;  /* gradient end, urgency */

    /* backgrounds */
    --brand-bg:             #FAF8F3;  /* page & section bg */
    --brand-bg-section:     #FAF8F3;

    /* text & borders */
    --brand-text-dark:      #1a1a1a;
    --brand-text-mid:       #4A4A4A;  /* secondary text */
    --brand-text-muted:     #888;     /* placeholders, hints */
    --brand-border:         #e8e8e8;
    --brand-border-mid:     #ddd;

    /* feedback */
    --brand-danger:         #e53935;
    --brand-danger-light:   #ffebee;
    --brand-danger-pale:    #fff5f5;
    --brand-warning:        #f59e0b;
    --brand-success:        #22c55e;
    --brand-info:           #60a5fa;

    /* legacy aliases — do not use in new code */
    --color1:   #000000;
    --color2:   var(--brand-gold-dark);
    --color3:   #686868;
    --color4:   #ff15bd;
    --color5:   #F4F4F4;

    /* product-detail.css aliases — migrate eventually */
    --green:    var(--brand-dark);
    --green-dk: var(--brand-deep);
    --green-lt: var(--brand-tint-light);
    --gold:     var(--brand-gold);
    --gold-lt:  var(--brand-gold-light);
    --dark:     var(--brand-text-dark);
    --mid:      var(--brand-text-mid);
    --muted:    var(--brand-text-muted);
    --border:   var(--brand-border);
    --bg:       #fafaf8;
}