/* ============================================
   FlowHub - CSS Variables (Light Theme)
   ------------------------------------------------------------
   全站唯一亮色真源（2026-07-23 亮化收斂）。
   原深色主題已整組換為淺色；後台 admin 與前台
   shop/cart/payment/result/index/simulate-pay 共用同一套 token，
   確保後台與前台視覺一致、文字與輸入框皆足對比可見。
   ============================================ */

@import url('https://cdn.jsdelivr.net/npm/remixicon@4.1.0/fonts/remixicon.css');

:root {
  /* 背景：淺灰藍層級 */
  --color-bg-primary:       #f4f6fb;
  --color-bg-secondary:     #eef1f8;
  --color-bg-tertiary:      #e6eaf4;
  --color-bg-elevated:      #ffffff;

  /* 卡片：白半透明玻璃 */
  --glass-bg:               rgba(255, 255, 255, 0.72);
  --glass-bg-hover:         rgba(255, 255, 255, 0.88);
  --glass-bg-light:         rgba(15, 23, 42, 0.03);
  --glass-bg-lighter:       rgba(15, 23, 42, 0.05);
  --glass-border:           rgba(15, 23, 42, 0.10);
  --glass-border-hover:     rgba(15, 23, 42, 0.18);
  --glass-blur:             16px;
  --glass-blur-heavy:       24px;

  /* 強調色：加深一階，白底對比足 */
  --color-accent:           #4f46e5;
  --color-accent-hover:     #4338ca;
  --color-accent-active:    #3730a3;
  --color-accent-muted:     rgba(99, 102, 241, 0.12);
  --color-accent-border:    rgba(99, 102, 241, 0.32);
  --color-accent-glow:      rgba(99, 102, 241, 0.20);

  --color-success:          #16a34a;
  --color-success-bg:       rgba(34, 197, 94, 0.14);
  --color-success-border:   rgba(34, 197, 94, 0.35);

  --color-danger:           #dc2626;
  --color-danger-bg:        rgba(239, 68, 68, 0.12);
  --color-danger-border:    rgba(239, 68, 68, 0.32);

  --color-warning:          #d97706;
  --color-warning-bg:       rgba(245, 158, 11, 0.14);
  --color-warning-border:   rgba(245, 158, 11, 0.35);

  --color-info:             #2563eb;
  --color-info-bg:          rgba(59, 130, 246, 0.12);
  --color-info-border:      rgba(59, 130, 246, 0.32);

  /* 文字：深藍灰層級（淺底上足對比） */
  --text-primary:           #1e293b;
  --text-secondary:         #475569;
  --text-tertiary:          #64748b;
  --text-muted:             #64748b;
  --text-inverse:           #ffffff;

  --border-default:         rgba(15, 23, 42, 0.08);
  --border-strong:          rgba(15, 23, 42, 0.14);
  --border-focus:           var(--color-accent);
  --divider:                rgba(15, 23, 42, 0.08);

  --shadow-sm:              0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md:              0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg:              0 8px 32px rgba(15, 23, 42, 0.10);
  --shadow-xl:              0 16px 48px rgba(15, 23, 42, 0.12);
  --shadow-accent:          0 4px 24px var(--color-accent-glow);
  --shadow-inset:           inset 0 1px 0 rgba(255, 255, 255, 0.6);

  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;

  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  --font-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --text-xs:     0.75rem;
  --text-sm:     0.8125rem;
  --text-base:   0.875rem;
  --text-md:     1rem;
  --text-lg:     1.125rem;
  --text-xl:     1.25rem;
  --text-2xl:    1.5rem;
  --text-3xl:    1.875rem;
  --text-4xl:    2.25rem;

  --leading-tight:   1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.75;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   350ms cubic-bezier(0.4, 0, 0.2, 1);

  --z-base:      1;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-sidebar:   300;
  --z-header:    400;
  --z-overlay:   500;
  --z-modal:     600;
  --z-toast:     700;
  --z-tooltip:   800;

  --sidebar-width:        260px;
  --sidebar-collapsed:    72px;
  --header-height:        64px;
  --container-max:        1280px;
  --content-padding:      var(--space-lg);

  /* Aliases for component compatibility */
  --bg-primary:     var(--color-bg-primary);
  --bg-card:        var(--glass-bg);
  --bg-input:       #ffffff;
  --accent:         var(--color-accent);
  --accent-hover:   var(--color-accent-active);
  --border-color:   rgba(15, 23, 42, 0.12);
  --success:        var(--color-success);
  --danger:         var(--color-danger);
  --warning:        var(--color-warning);
  --info:           var(--color-info);
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(15,23,42,0.16); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,0.28); }
* { scrollbar-width: thin; scrollbar-color: rgba(15,23,42,0.16) transparent; }