/* ============================================================
   Copyrights Hub — Design tokens
   Màu & font lấy theo web đang chạy: copyrights.vn (nền đen, cam vàng #f5a623).
   ============================================================ */
:root {
  /* Nền & bề mặt */
  --bg-page:        #0d0d0d;
  --bg-page-deep:   #08080a;
  --bg-card:        #17171a;
  --bg-elev:        #1f1f24;
  --bg-tint:        #201a0e;   /* nền nhấn amber rất tối */
  --bg-chip:        #232329;
  --bg-spec:        #131316;
  --bg-sidebar:     #0a0a0c;

  /* Viền */
  --border:         #26262b;
  --border-strong:  #34343a;
  --border-brand:   #f5a623;

  /* Chữ */
  --text-head:      #ffffff;
  --text-body:      #d4d4d8;
  --text-muted:     #a1a1aa;
  --text-hint:      #9ca3af;
  --text-dim:       #52525b;
  --text-on-cta:    #1a1206;

  /* Thương hiệu */
  --cta:            #f5a623;
  --cta-grad:       linear-gradient(180deg, #fbb33f 0%, #f5a623 100%);
  --cta-hover:      #fbb33f;
  --accent:         #f5a623;
  --amber-deep:     #c78a1e;
  --nav-active-bg:  #2a2110;

  /* Trạng thái */
  --ok:             #4ade80;  --ok-bg:     #14301f;
  --warn:           #fbbf24;  --warn-bg:   #2a2110;
  --danger:         #f87171;  --danger-bg: #3a1a1a;
  --online:         #4ade80;

  /* Gradient nền */
  --grad-hero:      linear-gradient(160deg, #0a0a0c 0%, #2a2010 62%, #c78a1e 100%);
  --grad-card:      linear-gradient(135deg, #17171a 0%, #c78a1e 100%);
  --grad-logo:      linear-gradient(135deg, #17171a 0%, #c78a1e 100%);

  /* Chữ */
  --font-display: 'Poppins', system-ui, sans-serif;   /* tiêu đề 600–700, KHÔNG viết hoa toàn bộ */
  --font-sans:    'Poppins', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --text-2xs: 10px; --text-xs: 11px; --text-sm: 12px; --text-md: 13px;
  --text-base: 14px; --text-lg: 15px; --text-xl: 17px; --text-2xl: 21px;
  --text-3xl: 26px; --text-4xl: 34px; --text-5xl: 46px;
  --tracking-label: 0.14em;   /* chỉ dùng cho nhãn eyebrow viết hoa */
  --tracking-display: -0.01em;

  /* Khoảng cách (lưới 4px) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* Bo góc */
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-pill: 999px;
  --r-phone: 44px; --r-tablet: 28px; --r-desktop: 20px;

  /* Đổ bóng */
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.4);
  --shadow-lg: 0 18px 40px rgba(0,0,0,0.5);
  --shadow-cta: 0 14px 34px rgba(245,166,35,0.28);
  --focus-ring: 0 0 0 3px rgba(245,166,35,0.40);

  /* Khung tham chiếu */
  --frame-mobile-w: 390px;  --frame-mobile-h: 844px;
  --frame-tablet-w: 1194px; --frame-tablet-h: 834px;
  --frame-desktop-w: 1440px; --frame-desktop-h: 900px;
  --tabbar-h: 76px; --topbar-h: 64px; --sidebar-w: 238px; --sidebar-w-admin: 250px;
}