/*
 * theme.css — Botanical Garden Design System (Vườn Hoa Đà Lạt)
 *
 * All color values as RGB channels (space-separated) for opacity modifiers.
 * Single source of truth alongside tailwind-theme.js.
 */

:root {
    /* Core palette — Botanical Garden */
    --c-primary: 91 123 106;            /* #5B7B6A Sage */
    --c-primary-light: 110 154 128;     /* #6E9A80 Light Sage */
    --c-primary-dark: 58 82 71;         /* #3A5247 Deep Sage */
    --c-secondary: 142 124 173;         /* #8E7CAD Lavender */
    --c-secondary-light: 168 150 196;   /* #A896C4 Light Lavender */
    --c-bg: 247 248 244;               /* #F7F8F4 Botanical Cream */
    --c-bg-dark: 236 240 230;          /* #ECF0E6 Sage Mist */
    --c-accent: 176 125 79;            /* #B07D4F Clay */
    --c-accent-dark: 138 94 56;        /* #8A5E38 Dark Earth */
    --c-highlight: 201 168 76;         /* #C9A84C Honey */
    --c-highlight-light: 240 230 200;  /* #F0E6C8 Light Honey */

    /* Status colors */
    --c-success: 91 140 90;            /* #5B8C5A */
    --c-success-text: 59 107 59;       /* #3B6B3B */
    --c-success-light: 232 240 228;    /* #E8F0E4 */
    --c-success-bg: 242 247 240;       /* #F2F7F0 */
    --c-danger: 194 84 77;             /* #C2544D */
    --c-danger-text: 139 50 52;        /* #8B3234 */
    --c-danger-light: 246 224 225;     /* #F6E0E1 */
    --c-danger-bg: 251 240 240;        /* #FBF0F0 */
    --c-warning-light: 240 230 200;    /* #F0E6C8 */
    --c-warning-bg: 247 248 244;       /* #F7F8F4 */
    --c-info-light: 220 230 214;       /* #DCE6D6 */
    --c-info-bg: 235 241 231;          /* #EBF1E7 */

    /* Text */
    --c-text-secondary: 74 74 74;      /* #4A4A4A */
}

/* Domain accent system — overridden per domain via inline style on layout wrapper */
:root {
  --domain-accent: #5B7B6A;
  --domain-accent-light: rgba(91, 123, 106, 0.1);
  --domain-accent-rgb: 91 123 106;
}

/* === Customer Portal Redesign — Design System === */
:root {
  --status-pending: 201 168 76;
  --status-preparing: 255 152 0;
  --status-confirmed: 33 150 243;
  --status-completed: 76 175 80;
  --status-cancelled: 220 53 69;
}

.cp-hero { background: linear-gradient(135deg, rgb(var(--c-primary)) 0%, #3d5a4a 100%); color: white; padding: 1.5rem 1rem 1.125rem; }
.cp-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: 0.625rem; font-size: 0.625rem; font-weight: 600; }
.cp-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; }
.cp-badge-pending   { background: rgb(var(--status-pending) / 0.12); color: rgb(var(--status-pending)); }
.cp-badge-pending::before   { background: rgb(var(--status-pending)); }
.cp-badge-preparing { background: rgb(var(--status-preparing) / 0.12); color: rgb(var(--status-preparing)); }
.cp-badge-preparing::before { background: rgb(var(--status-preparing)); }
.cp-badge-confirmed { background: rgb(var(--status-confirmed) / 0.12); color: rgb(var(--status-confirmed)); }
.cp-badge-confirmed::before { background: rgb(var(--status-confirmed)); }
.cp-badge-completed, .cp-badge-delivered, .cp-badge-ready { background: rgb(var(--status-completed) / 0.12); color: rgb(var(--status-completed)); }
.cp-badge-completed::before, .cp-badge-delivered::before, .cp-badge-ready::before { background: rgb(var(--status-completed)); }
.cp-badge-cancelled { background: rgb(var(--status-cancelled) / 0.12); color: rgb(var(--status-cancelled)); }
.cp-badge-cancelled::before { background: rgb(var(--status-cancelled)); }
.cp-badge-accepted  { background: rgb(var(--status-confirmed) / 0.12); color: rgb(var(--status-confirmed)); }
.cp-badge-accepted::before  { background: rgb(var(--status-confirmed)); }
.cp-badge-in-progress { background: rgb(var(--status-preparing) / 0.12); color: rgb(var(--status-preparing)); }
.cp-badge-in-progress::before { background: rgb(var(--status-preparing)); }

.cp-progress { height: 3px; background: #e8e8e8; border-radius: 2px; overflow: hidden; }
.cp-progress-fill { height: 100%; border-radius: 2px; transition: width 0.3s ease; }

.cp-qty { display: inline-flex; align-items: center; border-radius: 0.5rem; overflow: hidden; border: 1px solid #e0e0e0; }
.cp-qty-btn { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: #f5f5f5; font-size: 1rem; color: #666; cursor: pointer; border: none; }
.cp-qty-btn:active { background: #e8e8e8; }
.cp-qty-val { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 600; }
.cp-qty-sm .cp-qty-btn, .cp-qty-sm .cp-qty-val { width: 24px; height: 24px; font-size: 0.875rem; }

.cp-card-accent { background: white; border-radius: 0.75rem; padding: 0.875rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05); border-left: 3px solid transparent; }

.cp-icon-sage      { background: #f0f7f2; }
.cp-icon-lavender  { background: #f5f0f9; }
.cp-icon-honey     { background: #fdf6e8; }
.cp-icon-coral     { background: #fef0ef; }
.cp-icon-blue      { background: #f0f4f7; }
.cp-icon-clay      { background: #f7f4f0; }