/**
 * RoseBella Design System — Luxury Flower & Chocolate Identity
 * Premium gifting brand: romance, elegance, warmth, softness.
 * --theme-color / --theme-hover-bg overridden at runtime from General Settings.
 */

:root {
    /* ── Primary Gold ── */
    --rb-gold-700: #8c6126;
    --rb-gold-600: #a3732f;
    --rb-gold-500: #b8863b;
    --rb-gold-400: #c99a52;
    --rb-gold-300: #e8d4b0;
    --rb-gold-200: #f5ebe0;
    --rb-gold-100: #faf6f0;

    /* ── Chocolate Brown (premium / confirmation only) ── */
    --rb-chocolate: #5a3a2e;
    --rb-chocolate-dark: #472c23;
    --rb-chocolate-light: #7a5244;
    --rb-chocolate-soft: #f3ece8;

    /* ── Soft Rose ── */
    --rb-rose-600: #e8b4c4;
    --rb-rose-500: #f7dce3;
    --rb-rose-400: #fad9e3;
    --rb-rose-300: #fce8ef;
    --rb-rose-200: #fff0f4;
    --rb-rose-100: #fff5f7;
    --rb-rose-50: #fffafb;

    /* ── Workspace & surfaces ── */
    --rb-cream: #fcfaf8;
    --rb-white: #ffffff;
    --rb-border-color: #eee5da;
    --body-color: var(--rb-cream);
    --rb-workspace: var(--rb-cream);
    --rb-workspace-warm: var(--rb-rose-100);

    /* ── Dynamic theme (JS from General Settings) ── */
    --theme-color: var(--rb-gold-500);
    --theme-hover-bg: var(--rb-rose-500);
    --theme-color-rgb: 184, 134, 59;

    /* ── Semantic brand aliases ── */
    --rb-brand: var(--rb-gold-500);
    --rb-brand-hover: var(--rb-gold-600);
    --rb-brand-deep: var(--rb-gold-700);
    --rb-brand-light: var(--rb-rose-500);
    --rb-brand-soft: var(--rb-rose-100);
    --rb-brand-muted: var(--rb-rose-300);
    --rb-brand-bright: var(--rb-gold-400);
    --rb-brand-glow: rgba(184, 134, 59, 0.12);
    --rb-brand-focus: rgba(184, 134, 59, 0.08);

    --rb-gold: var(--rb-gold-500);
    --rb-gold-light: var(--rb-gold-400);
    --rb-gold-soft: var(--rb-gold-200);
    --rb-gold-deep: var(--rb-gold-700);
    --rb-gold-glow: rgba(184, 134, 59, 0.22);

    /* Primary action — Amazon-style gold pill (exact reference) */
    --rb-cta-top: #f7dfa5;
    --rb-cta-bottom: #f0c14b;
    --rb-cta-top-hover: #f5d78e;
    --rb-cta-bottom-hover: #eeb933;
    --rb-cta-top-active: #eecd6a;
    --rb-cta-bottom-active: #e6b322;
    --rb-cta-primary: #f0c14b;
    --rb-cta-secondary: #f7dfa5;
    --rb-cta-dark-gold: #846a29;
    --rb-cta-border: #a88734;
    --rb-cta-border-mid: #9c7e31;
    --rb-cta-text: #111111;
    --rb-cta-text-disabled: #6f7376;
    --rb-cta-bg-disabled: #e7e9ec;
    --rb-cta-shadow-color: rgba(15, 17, 17, 0.15);
    --rb-cta-shadow-color-hover: rgba(15, 17, 17, 0.18);
    --rb-cta-gradient: linear-gradient(to bottom, #f7dfa5 0%, #f0c14b 100%);
    --rb-cta-gradient-hover: linear-gradient(to bottom, #f5d78e 0%, #eeb933 100%);
    --rb-cta-gradient-active: linear-gradient(to bottom, #eecd6a 0%, #e6b322 100%);
    --rb-cta-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(15, 17, 17, 0.15);
    --rb-cta-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 2px 5px rgba(15, 17, 17, 0.18);
    --rb-cta-shadow-active: inset 0 1px 2px rgba(15, 17, 17, 0.2);

    /* Legacy aliases (charts, sidebar, etc.) */
    --rb-cta: var(--rb-cta-primary);
    --rb-cta-deep: var(--rb-cta-dark-gold);
    --rb-cta-light: var(--rb-cta-secondary);
    --rb-cta-glow: var(--rb-cta-shadow-color);

    /* Analytics / charts accent */
    --rb-chart-accent: var(--rb-gold-500);
    --rb-chart-accent-light: var(--rb-gold-400);
    --rb-chart-gradient: linear-gradient(135deg, var(--rb-gold-500) 0%, var(--rb-gold-400) 100%);
    --rb-chart-glow: rgba(184, 134, 59, 0.32);
    --rb-chart-mesh: rgba(184, 134, 59, 0.06);

    --dark-theme-color: #2b2a29;
    --dark-theme-body-color: #1f1e1d;
    --dark-border-color: #3d3835;

    /* ── Neutrals ── */
    --rb-neutral-50: var(--rb-cream);
    --rb-neutral-100: #f8f5f2;
    --rb-neutral-150: #f3f0ec;
    --rb-neutral-200: var(--rb-border-color);
    --rb-neutral-300: #e5ddd3;
    --rb-neutral-400: #c4bab0;
    --rb-neutral-500: #756a61;
    --rb-neutral-600: #5c534c;
    --rb-neutral-700: #3d3835;
    --rb-neutral-800: #2b2a29;
    --rb-neutral-900: #1f1e1d;
    --rb-neutral-950: #141312;

    /* ── Text ── */
    --rb-text-primary: #2b2a29;
    --rb-text-secondary: #756a61;
    --rb-text-muted: #9a8f86;
    --rb-text-label: #756a61;
    --rb-text-inverse: #ffffff;

    /* ── Surfaces & borders ── */
    --rb-surface: rgba(255, 255, 255, 0.92);
    --rb-surface-solid: var(--rb-white);
    --rb-surface-muted: var(--rb-cream);
    --rb-surface-subtle: var(--rb-rose-100);
    --rb-border: var(--rb-border-color);
    --rb-border-soft: rgba(238, 229, 218, 0.65);
    --rb-border-strong: var(--rb-border-color);
    --rb-mesh-accent: rgba(184, 134, 59, 0.03);
    --rb-mesh-brand: rgba(247, 220, 227, 0.04);
    --rb-mesh-chocolate: rgba(90, 58, 46, 0.02);

    /* ── Feedback (soft & modern) ── */
    --rb-success: #3d8b6e;
    --rb-success-light: #edf7f2;
    --rb-success-gradient: linear-gradient(135deg, #edf7f2 0%, #d8efe6 100%);
    --rb-success-bright: #4a9d7c;
    --rb-success-glow: rgba(61, 139, 110, 0.12);

    --rb-danger: #c45c5c;
    --rb-danger-deep: #a84848;
    --rb-danger-light: #fdf0f0;
    --rb-danger-gradient: linear-gradient(135deg, #fdf0f0 0%, #fce4e4 100%);
    --rb-danger-bright: #d46a6a;
    --rb-danger-glow: rgba(196, 92, 92, 0.15);

    --rb-warning: #c9923a;
    --rb-warning-light: #fdf6eb;
    --rb-warning-text: #9a6b1f;
    --rb-warning-badge-bg: #faf0dc;

    --rb-info: #5a8fa8;
    --rb-info-light: #eef5f8;
    --rb-info-blue: #5a8fa8;
    --rb-info-blue-light: #eef5f8;
    --rb-info-sky: #6a9fb8;

    /* ── Order status palette ── */
    --rb-status-pending: var(--rb-warning);
    --rb-status-pending-bg: var(--rb-warning-light);
    --rb-status-pending-text: var(--rb-warning-text);

    --rb-status-confirm: var(--rb-info);
    --rb-status-confirm-bg: var(--rb-info-light);
    --rb-status-confirm-text: var(--rb-info);

    --rb-status-processing: var(--rb-gold-500);
    --rb-status-processing-bg: var(--rb-gold-100);
    --rb-status-processing-text: var(--rb-gold-700);

    --rb-status-pickup: #6a9fb8;
    --rb-status-pickup-bg: var(--rb-info-light);
    --rb-status-pickup-text: var(--rb-info);

    --rb-status-onTheWay: #6a9fb8;
    --rb-status-onTheWay-bg: var(--rb-info-light);
    --rb-status-onTheWay-text: var(--rb-info-sky);

    --rb-status-delivered: var(--rb-success);
    --rb-status-delivered-bg: var(--rb-success-light);
    --rb-status-delivered-text: var(--rb-success);

    --rb-status-cancelled: var(--rb-danger);
    --rb-status-cancelled-bg: var(--rb-danger-light);
    --rb-status-cancelled-text: var(--rb-danger);

    --rb-status-paymentFailed: var(--rb-danger-deep);
    --rb-status-paymentFailed-bg: var(--rb-danger-light);
    --rb-status-paymentFailed-text: var(--rb-danger-deep);

    /* ── Activity icon variants ── */
    --rb-activity-brand-bg: var(--rb-rose-100);
    --rb-activity-brand-text: var(--rb-gold-600);
    --rb-activity-blue-bg: var(--rb-info-light);
    --rb-activity-blue-text: var(--rb-info);
    --rb-activity-green-bg: var(--rb-success-light);
    --rb-activity-green-text: var(--rb-success);
    --rb-activity-orange-bg: var(--rb-warning-light);
    --rb-activity-orange-text: var(--rb-warning-text);

    /* ── KPI icon gradients ── */
    --rb-kpi-brand-gradient: radial-gradient(circle at 35% 35%, var(--rb-rose-100) 0%, var(--rb-rose-300) 100%);
    --rb-kpi-pink-gradient: radial-gradient(circle at 35% 35%, var(--rb-rose-100) 0%, var(--rb-rose-500) 100%);
    --rb-kpi-gold-gradient: radial-gradient(circle at 35% 35%, var(--rb-gold-100) 0%, var(--rb-gold-300) 100%);
    --rb-kpi-green-gradient: radial-gradient(circle at 35% 35%, var(--rb-success-light) 0%, #d8efe6 100%);
    --rb-kpi-chocolate-gradient: radial-gradient(circle at 35% 35%, var(--rb-chocolate-soft) 0%, #e8ddd8 100%);

    /* ── Buttons (neutral) ── */
    --rb-btn-neutral-bg: var(--rb-white);
    --rb-btn-neutral-hover: var(--rb-rose-100);
    --rb-btn-neutral-border: var(--rb-gold-500);
    --rb-btn-neutral-text: var(--rb-text-primary);

    /* ── Legacy aliases ── */
    --cf-blue: var(--rb-brand);
    --cf-blue-light: var(--rb-brand-bright);
    --cf-blue-dark: var(--rb-brand-deep);
    --cf-blue-glow: var(--rb-brand-glow);
    --cf-red: var(--rb-danger);
    --cf-red-glow: var(--rb-danger-glow);
    --cf-green: var(--rb-success);
    --cf-btn-neutral-bg: var(--rb-btn-neutral-bg);
    --cf-btn-neutral-hover: var(--rb-btn-neutral-hover);
    --cf-btn-neutral-border: var(--rb-btn-neutral-border);
    --cf-btn-neutral-text: var(--rb-btn-neutral-text);

    /* ── Sidebar ── */
    --sidebar-gold: var(--rb-gold-500);
    --sidebar-gold-dark: var(--rb-gold-700);
    --sidebar-gold-light: var(--rb-gold-400);
    --sidebar-icon: var(--rb-gold-600);
    --sidebar-icon-muted: var(--rb-gold-400);
    --sidebar-icon-bg: color-mix(in srgb, var(--rb-gold-500) 8%, #fff);
    --sidebar-icon-bg-active: color-mix(in srgb, var(--rb-gold-500) 14%, #fff);
    --sidebar-cream: var(--rb-cream);
    --sidebar-surface: var(--rb-white);
    --sidebar-pink-soft: var(--rb-rose-500);
    --sidebar-pink-active: var(--rb-rose-500);
    --sidebar-pink-badge: var(--rb-rose-100);
    --sidebar-badge-text: var(--rb-gold-700);
    --sidebar-accent: var(--rb-gold-500);
    --sidebar-accent-soft: var(--rb-rose-100);
    --sidebar-text: var(--rb-text-primary);
    --sidebar-text-muted: var(--rb-text-secondary);
    --sidebar-border: var(--rb-border-color);
}

/* ── Dark mode tokens (minimal — app stays bright by default) ── */
.app-theme-dark {
    --rb-surface: rgba(43, 42, 41, 0.92);
    --rb-surface-solid: var(--dark-theme-color);
    --rb-surface-muted: var(--dark-theme-body-color);
    --rb-surface-subtle: #333130;
    --rb-border: rgba(61, 56, 53, 0.85);
    --rb-border-soft: rgba(61, 56, 53, 0.6);
    --rb-text-primary: #f8f6f4;
    --rb-text-secondary: #b8aea4;
    --rb-text-label: #9a9088;
    --rb-mesh-accent: rgba(184, 134, 59, 0.06);
    --rb-mesh-brand: rgba(247, 220, 227, 0.04);
    --rb-chart-mesh: rgba(184, 134, 59, 0.08);
}