/**
 * DESIGN SYSTEM TOKENS — DA ĐẸP MỖI NGÀY
 * Clinical Softness: Sạch sẽ, lâm sàng, nữ tính, sang trọng & dịu dàng
 * Tuân thủ 100% DESIGN.md
 */

:root {
  /* === Core Palette === */
  --color-primary:          #A85768; /* Rosewood (Hồng mộc) */
  --color-primary-hover:    #8C4353; /* Rosewood Dark */
  --color-primary-soft:     #F6E9EC; /* Rosewood Tint */
  --color-primary-deep:     #46303A; /* Rosewood Deep */
  --color-secondary:        #7C8B6F; /* Sage (Xô thảm) */
  --color-secondary-hover:  #68755B; /* Sage Dark */
  --color-secondary-soft:   #EDF1E8; /* Sage Tint */

  /* === Neutrals === */
  --color-background:       #FAF7F4; /* Ivory (Ngà) - Nền toàn trang */
  --color-surface:          #FFFFFF; /* White - Nền card / box */
  --color-surface-alt:      #F4EFEA; /* Linen (Vải lanh) - Nền phụ */
  --color-text-primary:     #2C2420; /* Espresso - Tiêu đề, số liệu */
  --color-text-secondary:   #6F635B; /* Taupe - Body text */
  --color-text-tertiary:    #9C8F86; /* Stone - Meta text, caption */
  --color-text-on-primary:  #FFFFFF; /* White */
  --color-text-on-deep:     #F3ECE6; /* Pearl - Chữ trên nền deep */
  --color-border:           #E9E1D9; /* Sand - Viền chuẩn 1px */
  --color-border-strong:    #D8CCC1; /* Sand Dark */

  /* === Semantic Colors === */
  --color-success:          #4F7A5B;
  --color-success-soft:     #E8F0E9;
  --color-warning:          #B98A3E;
  --color-warning-soft:     #F7EFE0;
  --color-error:            #B4443C;
  --color-error-soft:       #F9E9E7;

  /* === Typography Stacks === */
  --font-heading:           'Playfair Display', 'Times New Roman', serif;
  --font-body:              'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif;

  /* === Elevation (Warm Tint from Espresso #2C2420) === */
  --shadow-sm:              0 1px 2px rgba(44, 36, 32, 0.04);
  --shadow-base:            0 2px 8px rgba(44, 36, 32, 0.05);
  --shadow-hover:           0 8px 24px rgba(44, 36, 32, 0.08);
  --shadow-dropdown:        0 12px 32px rgba(44, 36, 32, 0.12);
  --shadow-modal:           0 24px 64px rgba(44, 36, 32, 0.16);

  /* === Shapes / Border Radius === */
  --radius-button:          999px; /* Pill */
  --radius-card:            16px;
  --radius-image:           12px;
  --radius-badge:           999px; /* Pill */
  --radius-input:           8px;
  --radius-modal:           20px;
  --radius-avatar:          50%;

  /* === Spacing Scale (Multiples of 4px) === */
  --space-1:                4px;   /* 0.25rem */
  --space-2:                8px;   /* 0.5rem */
  --space-3:                12px;  /* 0.75rem */
  --space-4:                16px;  /* 1rem */
  --space-5:                20px;  /* 1.25rem */
  --space-6:                24px;  /* 1.5rem */
  --space-7:                32px;  /* 2rem */
  --space-8:                40px;  /* 2.5rem */
  --space-9:                48px;  /* 3rem */
  --space-10:               64px;  /* 4rem */
  --space-11:               80px;  /* 5rem */
  --space-12:               96px;  /* 6rem */
  --space-13:               128px; /* 8rem */

  /* === Layout Specs === */
  --container-max:          1200px;
  --container-padding:      24px;
  --container-padding-mobile: 16px;
  --section-padding:        96px;
  --section-padding-mobile: 56px;
  --grid-gap:               24px;
  --grid-gap-mobile:        16px;
  --header-height:          80px;
  --topbar-height:          38px;

  /* === Motion Timing & Easing === */
  --duration-fast:          150ms;
  --duration:               300ms;
  --duration-slow:          500ms;
  --ease:                   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:            cubic-bezier(0.34, 1.56, 0.64, 1);
}