/* =================================================
   F2F Design Tokens · v1.0
   Single source of truth cho colors, typography,
   spacing, motion. Mọi component đều dereference từ đây.
   ================================================= */

:root {
  /* === COLORS — PRIMARY === */
  --color-bordeaux:       #6B1F24;
  --color-bordeaux-deep:  #4A1418;
  --color-chocolate:      #3D2817;
  --color-chocolate-deep: #2A1A0E;
  --color-white:          #FFFFFF;

  /* === COLORS — SUPPORTING === */
  --color-ivory:          #F4EDE0;  /* warm paper */
  --color-cream:          #FAFAFA;  /* near-white card bg */
  --color-gold:           #C9A961;
  --color-gold-deep:      #9A7B3F;
  --color-camel:          #B8956A;
  --color-oxblood:        #3E1318;
  --color-forest:         #2A3D2E;
  --color-stone:          #7A6A5A;
  --color-mist:           #D4C9B8;

  /* === COLORS — FUNCTIONAL === */
  --color-success:        var(--color-forest);
  --color-danger:         var(--color-bordeaux);
  --color-warning:        var(--color-gold-deep);
  --color-info:           var(--color-chocolate);

  /* === COLORS — BORDER & SURFACE === */
  --color-border-subtle:  rgba(61, 40, 23, 0.08);
  --color-border-medium:  rgba(61, 40, 23, 0.15);
  --color-border-strong:  rgba(61, 40, 23, 0.35);
  --color-overlay-dark:   rgba(42, 26, 14, 0.6);
  --color-overlay-light:  rgba(255, 255, 255, 0.92);

  /* === TYPOGRAPHY FAMILIES === */
  --font-serif:  'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-sans:   'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:   'JetBrains Mono', 'Courier New', monospace;

  /* === TYPOGRAPHY SCALE (desktop baseline) === */
  --fs-display:   clamp(56px, 8vw, 108px);
  --fs-h1:        clamp(44px, 5vw, 72px);
  --fs-h2:        clamp(32px, 3.5vw, 52px);
  --fs-h3:        clamp(24px, 2.5vw, 36px);
  --fs-h4:        clamp(20px, 2vw, 26px);
  --fs-body-lg:   18px;
  --fs-body:      15px;
  --fs-body-sm:   13px;
  --fs-caption:   12px;
  --fs-eyebrow:   11px;
  --fs-micro:     10px;

  --lh-tight:     1.05;
  --lh-heading:   1.15;
  --lh-body:      1.7;
  --lh-relaxed:   1.8;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.18em;
  --tracking-widest: 0.3em;

  /* === SPACING SCALE (multiples of 4) === */
  --space-xs:    4px;
  --space-sm:    8px;
  --space-md:    16px;
  --space-lg:    24px;
  --space-xl:    32px;
  --space-2xl:   48px;
  --space-3xl:   64px;
  --space-4xl:   96px;
  --space-5xl:   140px;

  /* === LAYOUT === */
  --container-max:    1280px;
  --container-narrow: 880px;
  --container-pad:    48px;
  --container-pad-sm: 24px;

  /* === BORDER & RADIUS === */
  --border-thin:   1px;
  --border-med:    1.5px;
  --border-thick:  3px;
  --radius-none:   0;
  --radius-sm:     2px;
  --radius-md:     4px;
  --radius-circle: 50%;

  /* === SHADOW (restrained, luxury doesn't float) === */
  --shadow-soft:   0 4px 20px rgba(61, 40, 23, 0.08);
  --shadow-card:   0 10px 30px rgba(61, 40, 23, 0.10), 0 3px 8px rgba(61, 40, 23, 0.06);
  --shadow-lift:   0 20px 60px rgba(61, 40, 23, 0.18), 0 8px 20px rgba(61, 40, 23, 0.10);
  --shadow-press:  0 1px 3px rgba(61, 40, 23, 0.15);

  /* === MOTION === */
  --ease-luxury:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-sharp:    cubic-bezier(0.4, 0, 0.2, 1);
  --duration-xs:   150ms;
  --duration-sm:   250ms;
  --duration-md:   400ms;
  --duration-lg:   600ms;
  --duration-xl:   900ms;

  /* === Z-INDEX === */
  --z-nav:     100;
  --z-modal:   200;
  --z-toast:   300;
  --z-dropdown: 150;

  /* === GRID === */
  --grid-col-count:   12;
  --grid-gutter:      24px;
  --grid-gutter-sm:   16px;

  /* === IMAGE TREATMENT — palette harmony ===
     These filters desaturate warm/clashing photos and pull
     them into the bordeaux/chocolate/ivory brand palette.
     Hero shots are nearly monochrome with a warm sepia cast;
     product cards keep more color so suit fabric reads clearly. */
  --img-filter-hero:      grayscale(0.72) sepia(0.42) brightness(0.88) contrast(1.06);
  --img-filter-editorial: grayscale(0.58) sepia(0.35) brightness(0.91) contrast(1.04);
  --img-filter-card:      saturate(0.82) sepia(0.06) brightness(0.98)  contrast(1.02);
  --img-filter-thumb:     saturate(0.60) sepia(0.12) brightness(0.98);
  --img-filter-none:      none;
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-xs: 0ms;
    --duration-sm: 0ms;
    --duration-md: 0ms;
    --duration-lg: 0ms;
    --duration-xl: 0ms;
  }
}