/* ==========================================================================
   SB HOME — ARCHITECTURE & LUXURY INTERIOR
   FILE: assets/css/tokens.css (Design System Tokens & Foundation)
   Version: 2.0.0
   Rules: Max font-weight: 700. CẤM FONT-WEIGHT 800 & 900.
   ========================================================================== */

/* Import Google Fonts: Playfair Display (Luxury Serif - Full Vietnamese Support) & Plus Jakarta Sans (Sans-serif) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* ==========================================================================
     1. COLOR TOKENS: PRIMITIVE DARK SCALE (Obsidian & Charcoal)
     ========================================================================== */
  --primitive-dark-950: #0a0a0b; /* Obsidian Black - Hero & Dark Sections */
  --primitive-dark-900: #121214; /* Deep Charcoal - Surface Dark / Dropdowns */
  --primitive-dark-800: #1a1a1e; /* Card Dark / Modal Background */
  --primitive-dark-700: #2a2a30; /* Borders on dark / Muted surfaces */

  /* ==========================================================================
     2. COLOR TOKENS: PRIMITIVE LIGHT SCALE (Canvas & Off-White)
     ========================================================================== */
  --primitive-light-50:  #ffffff; /* Pure Canvas */
  --primitive-light-100: #f8f8f7; /* Off-White / Light Section */
  --primitive-light-200: #eeeee9; /* Subtle borders & Card Light */
  --primitive-light-400: #9e9ea3; /* Secondary text / Placeholders */

  /* ==========================================================================
     3. COLOR TOKENS: PRIMITIVE GOLD SCALE (Champagne & Antique Gold)
     ========================================================================== */
  --primitive-gold-300: #e2cca8;  /* Light shimmer / Hover state */
  --primitive-gold-400: #d4b88a;  /* Highlight & Active text */
  --primitive-gold-500: #c5a880;  /* Brand Primary Gold */
  --primitive-gold-600: #a7885b;  /* Deep Gold / Border contrast */

  /* ==========================================================================
     4. SEMANTIC TOKENS
     ========================================================================== */
  --bg-primary: var(--primitive-dark-950);
  --bg-surface: var(--primitive-dark-900);
  --bg-surface-light: var(--primitive-light-100);
  --bg-card: var(--primitive-dark-800);
  
  --text-main: var(--primitive-light-50);
  --text-muted: var(--primitive-light-400);
  --text-gold: var(--primitive-gold-400);
  --text-dark: var(--primitive-dark-950);

  --accent-gold: var(--primitive-gold-500);
  --accent-gold-hover: var(--primitive-gold-300);
  --border-subtle: rgba(197, 168, 128, 0.25);
  --border-subtle-hover: rgba(197, 168, 128, 0.6);
  --border-dark: var(--primitive-dark-700);

  /* Shadows & Glassmorphism */
  --shadow-gold-sm: 0 2px 10px rgba(197, 168, 128, 0.15);
  --shadow-gold-lg: 0 4px 20px rgba(197, 168, 128, 0.35);
  --shadow-dark: 0 16px 40px rgba(0, 0, 0, 0.5);
  --glass-bg: rgba(10, 10, 11, 0.75);
  --glass-blur: blur(12px);

  /* ==========================================================================
     5. TYPOGRAPHY TOKENS (Font Families & Fluid Scale clamp())
     ========================================================================== */
  --font-display: 'Playfair Display', 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Fluid Scale tự động thích ứng Mobile -> iPad -> PC */
  --type-display-2xl: clamp(36px, 4.2vw + 1rem, 64px);
  --type-heading-xl:  clamp(26px, 2.5vw + 0.8rem, 44px);
  --type-heading-md:  clamp(20px, 1.2vw + 0.6rem, 24px);
  --type-body-lg:     clamp(15px, 0.5vw + 0.6rem, 18px);
  --type-body-sm:     clamp(13px, 0.3vw + 0.6rem, 14px);
  --type-caption-mono: clamp(10px, 0.2vw + 0.5rem, 11px);

  /* Trọng lượng chữ cho phép: 300, 400, 500, 600, 700 (CẤM 800, 900) */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ==========================================================================
     6. SPACING & 8-POINT GRID TOKENS
     ========================================================================== */
  --space-4:   4px;
  --space-8:   8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-24:  24px;
  --space-32:  32px;
  --space-48:  48px;
  --space-64:  64px;
  --space-80:  80px;
  --space-120: 120px;
  --space-160: 160px;

  /* Container width */
  --container-max-width: 1440px;

  /* ==========================================================================
     7. MOTION TOKENS
     ========================================================================== */
  --motion-fast: 200ms ease-out;
  --motion-luxury: 600ms cubic-bezier(0.16, 1, 0.3, 1);
  --motion-card: 500ms cubic-bezier(0.2, 0, 0, 1);
}

/* Base Reset & Smoothness */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--primitive-dark-950);
  color: var(--primitive-light-50);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Accessibility Focus Visible */
:focus-visible {
  outline: 2px solid var(--primitive-gold-500) !important;
  outline-offset: 3px !important;
}

/* Images & Media */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
}