/*
 * DESIGN TOKENS — biến CSS dùng trong toàn theme. Màu gốc (--sh-brand, --sh-deep, --sh-glow, --sh-ink,
 * --sh-success, --sh-danger, --sh-warning) được in bởi sh_color_tokens() từ data/theme.php, nạp TRƯỚC
 * file này (xem path/style.blade.php). Mọi sắc độ khác ở đây tính từ màu gốc bằng color-mix(),
 * không thêm mã màu cứng ngoài #fff/#000/transparent.
 */

:root {
  /* ===== Thang màu brand (đỏ bìa da/rượu vang) ===== */
  --sh-brand-50:  color-mix(in srgb, var(--sh-brand) 6%,  #fff);
  --sh-brand-100: color-mix(in srgb, var(--sh-brand) 14%, #fff);
  --sh-brand-200: color-mix(in srgb, var(--sh-brand) 28%, #fff);
  --sh-brand-600: color-mix(in srgb, var(--sh-brand) 85%, #000);
  --sh-brand-700: color-mix(in srgb, var(--sh-brand) 70%, #000);

  /* ===== Thang màu deep (nền đậm - nâu cà phê) ===== */
  --sh-deep-900: color-mix(in srgb, var(--sh-deep) 88%, #000);
  --sh-deep-950: color-mix(in srgb, var(--sh-deep) 72%, #000);

  /* ===== Thang màu glow (vàng đồng) ===== */
  --sh-glow-200: color-mix(in srgb, var(--sh-glow) 30%, #fff);

  /* ===== Thang màu ink (chữ, viền, nền giấy) ===== */
  --sh-ink-700: color-mix(in srgb, var(--sh-ink) 85%, #fff);
  --sh-ink-500: color-mix(in srgb, var(--sh-ink) 55%, #fff);
  --sh-ink-300: color-mix(in srgb, var(--sh-ink) 28%, #fff);
  --sh-ink-100: color-mix(in srgb, var(--sh-ink) 10%, #fff);
  --sh-ink-50:  color-mix(in srgb, var(--sh-ink) 5%,  #fff);
  --sh-ink-30:  color-mix(in srgb, var(--sh-ink) 3%,  #fff);

  /* ===== Token theo vai trò ===== */
  --sh-primary: var(--sh-brand);
  --sh-primary-hover: var(--sh-brand-700);
  --sh-primary-soft: var(--sh-brand-50);
  --sh-text: var(--sh-ink-700);
  --sh-muted: var(--sh-ink-500);
  --sh-border: var(--sh-ink-100);
  --sh-surface: #fff;
  --sh-paper: var(--sh-ink-30);
  --sh-bg: var(--sh-paper);
  --sh-bg-muted: var(--sh-ink-50);
  --sh-bg-deep: linear-gradient(160deg, var(--sh-deep) 0%, var(--sh-deep-950) 100%);
  --sh-on-deep-muted: color-mix(in srgb, #fff 68%, transparent);
  --sh-ring: color-mix(in srgb, var(--sh-brand) 35%, transparent);

  --sh-star: var(--sh-glow);
  --sh-star-empty: var(--sh-ink-100);

  --sh-success: var(--sh-success, #3f7d4e);
  --sh-danger: var(--sh-danger, #a1332a);
  --sh-warning: var(--sh-warning, #b9792b);

  /* ===== Typography ===== */
  --sh-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sh-font-sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sh-font: var(--sh-font-sans);
  --sh-text-xs: .75rem;
  --sh-text-sm: .875rem;
  --sh-text-base: 1rem;
  --sh-text-lg: 1.125rem;
  --sh-text-xl: 1.25rem;
  --sh-text-2xl: 1.5rem;
  --sh-text-3xl: 1.875rem;
  --sh-text-4xl: 2.25rem;
  --sh-text-5xl: 3rem;
  --sh-weight-normal: 400;
  --sh-weight-medium: 500;
  --sh-weight-semibold: 600;
  --sh-weight-bold: 700;
  --sh-leading-tight: 1.2;
  --sh-leading-normal: 1.65;

  /* ===== Khoảng cách ===== */
  --sh-space-1: 4px;
  --sh-space-2: 8px;
  --sh-space-3: 12px;
  --sh-space-4: 16px;
  --sh-space-5: 20px;
  --sh-space-6: 24px;
  --sh-space-8: 32px;
  --sh-space-10: 40px;
  --sh-space-12: 48px;
  --sh-space-16: 64px;
  --sh-space-20: 80px;
  --sh-section-y: var(--sh-space-20);
  --sh-section-y-tight: var(--sh-space-12);

  /* ===== Bo góc ===== */
  --sh-radius-sm: 4px;
  --sh-radius-md: 8px;
  --sh-radius-lg: 14px;
  --sh-radius-xl: 20px;
  --sh-radius-pill: 999px;
  --sh-radius: var(--sh-radius-md);

  /* ===== Bóng đổ ===== */
  --sh-shadow-sm: 0 1px 2px color-mix(in srgb, var(--sh-ink) 10%, transparent);
  --sh-shadow: 0 6px 20px color-mix(in srgb, var(--sh-ink) 12%, transparent);
  --sh-shadow-lg: 0 20px 48px color-mix(in srgb, var(--sh-ink) 18%, transparent);

  /* ===== Chuyển động ===== */
  --sh-ease: cubic-bezier(.4, 0, .2, 1);
  --sh-duration: .2s;
  --sh-duration-slow: .4s;

  /* ===== Z-index ===== */
  --sh-z-header: 100;
  --sh-z-overlay: 200;
  --sh-z-top: 300;

  /* ===== Icon ===== */
  --sh-icon-sm: 16px;
  --sh-icon-md: 20px;
  --sh-icon-lg: 28px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sh-duration: 0s;
    --sh-duration-slow: 0s;
  }
}