/* ============================================================
   Seven Company - Design Tokens (Theme File)
   ------------------------------------------------------------
   Đổi màu / font / spacing / shadow → đổi tại đây.
   Tất cả styles.css đều tham chiếu các biến này, nên việc
   "đổi theme" sau này chỉ cần sửa file này.
   ============================================================ */

:root{

  /* ───── COLORS - Brand Gold & White, Black contrast ───────
     Bộ vàng thương hiệu Seven World:
       #FBF9D4  cream  (logo cream)
       #E1B95B  light gold
       #D0A02B  gold (brand primary)
       #C39837  deep gold
     Tương phản tối = ĐEN ấm (thay cho navy).
  */

  /* Surfaces (nền) */
  --surface-white:    #FFFFFF;
  --surface-paper:    #FFFFFF;   /* nền chính - trắng */
  --surface-cream:    #FBF9D4;   /* cream từ logo */
  --surface-sand:     #F6F5F1;   /* nền section xám ấm nhạt */
  --surface-deep:     #1A1712;   /* đen ấm dùng tương phản (section/footer) */

  /* Gold scale (brand) */
  --gold-50:   #FBF8EC;
  --gold-100:  #F6EEC8;
  --gold-200:  #F4E29E;
  --gold-300:  #F3D986;   /* light gold */
  --gold-400:  #ECCA6E;
  --gold-500:  #E2BA54;   /* GOLD - brand primary - logo #e1b754 */
  --gold-600:  #C8A03A;   /* deep gold */
  --gold-700:  #A07F26;   /* gold đậm readable trên nền trắng */
  --gold-800:  #7A601C;

  /* Ink (chữ) - black/charcoal ấm scale */
  --ink-900:   #1A1814;   /* đen ấm - heading */
  --ink-800:   #2A2620;
  --ink-700:   #3D372F;
  --ink-600:   #5C544B;   /* body text */
  --ink-500:   #7A7368;
  --ink-400:   #9A9387;
  --ink-300:   #BDB6A8;

  /* Lines / borders */
  --line:        #E9E5DB;
  --line-strong: #DBD5C7;
  --line-soft:   #F1EFE7;

  /* Semantic aliases ──────────────────────────── */
  --bg:          var(--surface-paper);
  --bg-alt:      var(--surface-sand);
  --bg-cream:    var(--surface-cream);
  --bg-white:    var(--surface-white);
  --bg-deep:     var(--surface-deep);

  --text:        var(--ink-600);
  --text-soft:   var(--ink-600);
  --text-mute:   var(--ink-500);
  --text-on-deep:#E7EBF2;

  --accent:      var(--gold-500);
  --accent-soft: var(--gold-300);
  --accent-deep: var(--gold-600);
  --accent-text: var(--gold-700);   /* yellow readable trên nền sáng */


  /* ───── TYPOGRAPHY ─────────────────────────────────────── */
  --font-display: 'Be Vietnam Pro', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'Space Mono', 'Courier New', monospace;

  /* Type scale (fluid) */
  --fs-eyebrow: .78rem;
  --fs-body:    1rem;
  --fs-lede:    1.12rem;
  --fs-h4:      1.1rem;
  --fs-h3:      clamp(1.35rem, 2.2vw, 1.65rem);
  --fs-h2:      clamp(2rem,    4vw,   3.1rem);
  --fs-h1:      clamp(2.6rem,  6vw,   5rem);


  /* ───── SPACING / LAYOUT ───────────────────────────────── */
  --container: 1240px;
  --gutter:    24px;
  --section-y: 80px;
  --section-y-sm: 60px;

  --radius-sm: 6px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-pill: 999px;


  /* ───── ELEVATION - neutral shadows trên nền sáng ───────── */
  --shadow-sm:    0 1px 2px rgba(26,24,20,.05);
  --shadow:       0 18px 50px -24px rgba(26,24,20,.18),
                  0 4px 14px -6px rgba(26,24,20,.07);
  --shadow-gold:  0 16px 40px -16px rgba(226,186,84,.50);
  --shadow-cream: 0 18px 50px -24px rgba(26,24,20,.12);


  /* ───── MOTION ─────────────────────────────────────────── */
  --ease:        cubic-bezier(.2,.7,.2,1);
  --ease-soft:   cubic-bezier(.16,.84,.44,1);   /* hover lift - extra mềm */
  --ease-out:    cubic-bezier(.22,1,.36,1);     /* exit, fade-in */
  --t-fast:      .22s;
  --t:           .38s;
  --t-hover:     .45s;                          /* hover transitions */
  --t-slow:      .3s;                           /* reveal-on-scroll - snappy để screenshot không bao giờ bắt được giữa frame */

  --lift-sm: -3px;
  --lift:    -6px;
  --lift-lg: -10px;
}