/* ==========================================================================
   Design tokens — TAMLEVIET (Ceremony Commerce)
   Đặc tả: ../ui-ux.md §3
   Component không được dùng số cứng. Shop chỉ ghi đè --primary* qua theme_json.
   ========================================================================== */

:root {
  --font-sans: "Inter", "Be Vietnam Pro", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Mono", Consolas, monospace;

  --fs-2xs: 10px;
  --fs-xs:  11px;
  --fs-sm:  12px;
  --fs-base:13px;
  --fs-md:  14px;
  --fs-lg:  16px;
  --fs-xl:  20px;
  --fs-2xl: 28px;

  --lh-tight: 1.25;
  --lh-normal: 1.45;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  --h-header:      44px;
  --h-context-bar: 40px;
  --h-status-bar:  24px;
  --h-row:         30px;
  --h-row-compact: 26px;
  --h-control:     28px;
  --h-control-sm:  24px;

  --w-col-left:  260px;
  --w-col-right: 320px;
  --w-col-rail:  40px;

  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* Nền giấy ấm — khác teal y tế của phongkham */
  --bg-app:      #f3f1ed;
  --bg-surface:  #ffffff;
  --bg-subtle:   #f8f6f2;
  --bg-hover:    #efece6;
  --bg-selected: #f3e6d8;
  --bg-inverse:  #1c1917;
  --bg-scrim:    rgba(28, 25, 23, .42);

  --border:        #e4dfd6;
  --border-strong: #cfc7ba;

  --text-primary:   #1c1917;
  --text-secondary: #5c564e;
  --text-muted:     #8a8378;
  --text-inverse:   #ffffff;

  /* Gỗ trầm — chủ đạo; shop được ghi đè --primary* */
  --primary:        #7c2d12;
  --primary-hover:  #641f0c;
  --primary-active: #4a1609;
  --primary-subtle: #f5e6dc;
  --primary-border: #e0b89a;

  --success: #16794c;  --success-subtle: #d9f2e4;  --success-border: #9bd9bb;
  --warning: #a15c07;  --warning-subtle: #fdf0d5;  --warning-border: #e8c47a;
  --danger:  #b42318;  --danger-subtle:  #fde7e5;  --danger-border:  #f0a9a3;
  --info:    #175cd3;  --info-subtle:    #dbeafe;  --info-border:    #a4c6f7;
  --critical:#8b1a10;

  --shadow-sm:    0 1px 2px rgba(28,25,23,.06);
  --shadow-md:    0 4px 12px rgba(28,25,23,.10);
  --shadow-lg:    0 12px 32px rgba(28,25,23,.16);
  --shadow-modal: 0 24px 64px rgba(28,25,23,.24);

  --z-header: 100; --z-dropdown: 200; --z-drawer: 300;
  --z-modal: 400;  --z-toast: 500;    --z-critical-alert: 600;

  --transition-fast: 120ms cubic-bezier(.4, 0, .2, 1);
  --transition-base: 180ms cubic-bezier(.4, 0, .2, 1);
}

:root[data-density="compact"] {
  --h-row: 26px;
  --h-control: 26px;
  --sp-3: 10px;
  --sp-4: 12px;
}

:root[data-textsize="large"] {
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-base:15px;
  --fs-md:  16px;
  --fs-lg:  18px;
  --h-row: 34px;
  --h-control: 32px;
}

:root[data-theme="dark"] {
  --bg-app:      #14110f;
  --bg-surface:  #1c1917;
  --bg-subtle:   #221e1b;
  --bg-hover:    #2a2521;
  --bg-selected: #3b2418;
  --bg-inverse:  #f5f0e8;
  --bg-scrim:    rgba(0, 0, 0, .62);

  --border:        #3a342e;
  --border-strong: #524a42;

  --text-primary:   #f5f0e8;
  --text-secondary: #b4aaa0;
  --text-muted:     #7a7268;
  --text-inverse:   #14110f;

  --primary:        #e8b48a;
  --primary-hover:  #f3c9a8;
  --primary-active: #fde8d4;
  --primary-subtle: #3b2418;
  --primary-border: #6b3d24;

  --success: #4ade80;  --success-subtle: #10291d;  --success-border: #1d4d33;
  --warning: #fbbf24;  --warning-subtle: #2b2110;  --warning-border: #6b4e15;
  --danger:  #f87171;  --danger-subtle:  #2d1512;  --danger-border:  #6b2721;
  --info:    #60a5fa;  --info-subtle:    #121f33;  --info-border:    #24406b;
  --critical:#fca5a5;
}