/* ============================================================
   SELLYRA DESIGN TOKENS — "Midnight Gold"
   Source of truth: chốt từ sellyra-landing-midnight.html (260714)
   Dùng chung cho MỌI mockup (web + mobile). KHÔNG hardcode màu ngoài file này.
   ============================================================ */
:root {
  /* --- Brand core (LOCKED — không đổi) --- */
  --c1: #D97706;            /* primary amber */
  --c2: #F59E0B;            /* secondary amber */
  --c3: #FBBF24;            /* bright accent */
  --tint: #FFFBEB;          /* amber tint bg */
  --tint2: #FEF3C7;
  --star: #FDE047;
  --ink: #0F172A;           /* text primary */
  --slate: #475569;         /* text secondary */
  --mist: #E2E8F0;          /* borders */
  --cloud: #F8FAFC;         /* page bg */
  --ok: #10B981;
  --warn: #F59E0B;
  --deepband: linear-gradient(135deg, #111827, #1F2937);
  --grad: linear-gradient(135deg, #1F2937, #374151);

  /* --- Extended semantic (app UI) --- */
  --danger: #EF4444;
  --info: #3B82F6;
  --ink-soft: #334155;
  --slate-soft: #64748B;
  --cloud-2: #F1F5F9;
  --white: #FFFFFF;

  /* Order state machine colors (map 1:1 với canonical states) */
  --st-new: #3B82F6;            /* NEW — blue */
  --st-confirmed: #8B5CF6;      /* CONFIRMED — violet */
  --st-packing: #F59E0B;        /* PACKING — amber */
  --st-ready: #D97706;          /* READY_TO_SHIP — deep amber */
  --st-shipped: #06B6D4;        /* SHIPPED — cyan */
  --st-delivered: #10B981;      /* DELIVERED — green */
  --st-completed: #059669;      /* COMPLETED — deep green */
  --st-cancelled: #94A3B8;      /* CANCELLED — gray */
  --st-return: #EF4444;         /* RETURN/REFUND — red */

  /* Channel brand */
  --ch-shopee: #EE4D2D;
  --ch-tiktok: #0F172A;

  /* Typography */
  --font-display: 'Space Grotesk', 'Inter', sans-serif;   /* headings, numbers, KPI */
  --font-body: 'Inter', -apple-system, sans-serif;
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px;
  --fs-15: 15px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px;
  --fs-24: 24px; --fs-28: 28px; --fs-32: 32px;

  /* Spacing (4px base) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* Radius (kế thừa landing: 12–20px) */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 99px;

  /* Shadows */
  --sh-card: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --sh-pop: 0 14px 40px rgba(15,23,42,.08);
  --sh-modal: 0 24px 60px rgba(15,23,42,.10);
  --sh-gold: 0 6px 20px color-mix(in srgb, var(--c1) 35%, transparent);

  /* Layout */
  --sidebar-w: 232px;
  --topbar-h: 60px;
  --table-row-h: 52px;
  --mobile-w: 390px;
  --mobile-tabbar-h: 64px;
}

/* Status pill — dùng thống nhất mọi nơi */
.pill { display:inline-flex; align-items:center; gap:5px; font: 600 var(--fs-11)/1 var(--font-body);
        padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.pill::before { content:''; width:6px; height:6px; border-radius:50%; background: currentColor; }
.pill-new       { color: var(--st-new);       background: color-mix(in srgb, var(--st-new) 10%, #fff); }
.pill-confirmed { color: var(--st-confirmed); background: color-mix(in srgb, var(--st-confirmed) 10%, #fff); }
.pill-packing   { color: var(--st-packing);   background: color-mix(in srgb, var(--st-packing) 12%, #fff); }
.pill-ready     { color: var(--st-ready);     background: color-mix(in srgb, var(--st-ready) 12%, #fff); }
.pill-shipped   { color: var(--st-shipped);   background: color-mix(in srgb, var(--st-shipped) 10%, #fff); }
.pill-delivered { color: var(--st-delivered); background: color-mix(in srgb, var(--st-delivered) 10%, #fff); }
.pill-completed { color: var(--st-completed); background: color-mix(in srgb, var(--st-completed) 10%, #fff); }
.pill-cancelled { color: var(--st-cancelled); background: var(--cloud-2); }
.pill-return    { color: var(--st-return);    background: color-mix(in srgb, var(--st-return) 8%, #fff); }

/* Channel badge */
.ch-badge { display:inline-flex; align-items:center; gap:6px; font: 600 var(--fs-11)/1 var(--font-body);
            padding: 3px 9px; border-radius: 6px; }
.ch-shopee { color: var(--ch-shopee); background: color-mix(in srgb, var(--ch-shopee) 9%, #fff); }
.ch-tiktok { color: var(--ch-tiktok); background: var(--cloud-2); }