/* ==========================================================================
   CÔNG TY LUẬT PHÚC KHANG ANH (LEGALMAX) — DESIGN SYSTEM TOKENS
   Phase 1: Design System & Homepage (Target: Desktop 1440px)
   Direction: Premium Legal Corporate — Modern Heritage — Elegant Professional
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     1. COLOR SYSTEM (Exact Brand Tokens)
     ------------------------------------------------------------------------ */
  --color-primary-burgundy: #741F2A;
  --color-deep-burgundy:    #52151E;
  --color-accent-red:       #A52A32;
  --color-champagne-gold:   #C5A15B;
  --color-antique-gold:     #B18B4B;
  --color-ivory-bg:         #F7F2E9;
  --color-cream-surface:    #EFE5D4;
  --color-white:            #FFFFFF;
  --color-dark-text:        #29201E;
  --color-secondary-text:   #71665E;
  --color-border:           #DED2BE;

  /* Semantic & Derived Tokens */
  --color-burgundy-darker:  #3B0E15;
  --color-gold-subtle:      rgba(197, 161, 91, 0.16);
  --color-gold-border:      rgba(197, 161, 91, 0.38);
  --color-burgundy-subtle:  rgba(116, 31, 42, 0.07);
  --color-ivory-translucent:rgba(247, 242, 233, 0.96);
  --color-text-on-dark:     #F7F2E9;
  --color-text-muted-dark:  #D7C9B8;
  --color-success:          #235D3A;
  --color-error:            #A52A32;

  /* ------------------------------------------------------------------------
     2. TYPOGRAPHY SYSTEM
     ------------------------------------------------------------------------ */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type Scale (Desktop 1440px) */
  --text-display: 3.125rem;   /* 50px - Hero Headline */
  --text-h1:      2.625rem;   /* 42px - Page Title */
  --text-h2:      2.25rem;    /* 36px - Section Heading */
  --text-h3:      1.5rem;     /* 24px - Featured Sub-heading / Lead Card */
  --text-h4:      1.25rem;    /* 20px - Service / Article Card Title */
  --text-lead:    1.125rem;   /* 18px - Lead Paragraph / Sapo */
  --text-body:    1rem;       /* 16px - Standard Body Copy */
  --text-sm:      0.9375rem;  /* 15px - Secondary Copy / Navigation */
  --text-xs:      0.8125rem;  /* 13px - Metadata / Category Label */
  --text-micro:   0.75rem;    /* 12px - Legal Index / Badge */

  /* Line Heights */
  --lh-tight:     1.18;
  --lh-snug:      1.28;
  --lh-normal:    1.55;
  --lh-relaxed:   1.7;

  /* ------------------------------------------------------------------------
     3. SPACING & LAYOUT SYSTEM
     ------------------------------------------------------------------------ */
  --container-max:      1240px;
  --container-padding:  32px;
  --grid-gap:           24px;
  --grid-gap-lg:        36px;

  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  --section-py-lg: 96px;
  --section-py-md: 76px;
  --section-py-sm: 56px;

  /* ------------------------------------------------------------------------
     4. BORDERS, RADIUS, SHADOWS & MOTION
     ------------------------------------------------------------------------ */
  --radius-none: 0px;
  --radius-xs:   2px;   /* Architectural crisp edge */
  --radius-sm:   4px;

  --border-thin:   1px solid var(--color-border);
  --border-gold:   1px solid var(--color-gold-border);
  --border-accent: 1px solid var(--color-primary-burgundy);

  --shadow-subtle:   0 4px 20px rgba(41, 32, 30, 0.05);
  --shadow-card:     0 12px 32px rgba(41, 32, 30, 0.08);
  --shadow-dropdown: 0 20px 48px rgba(41, 32, 30, 0.14);
  --shadow-modal:    0 28px 64px rgba(25, 12, 14, 0.35);

  --ease-out-quart:  cubic-bezier(0.25, 1, 0.5, 1);
  --transition-fast: 180ms cubic-bezier(0.25, 1, 0.5, 1);
  --transition-base: 280ms cubic-bezier(0.25, 1, 0.5, 1);
  --transition-slow: 450ms cubic-bezier(0.25, 1, 0.5, 1);

  /* Z-index Layers */
  --z-base:     1;
  --z-elevated: 10;
  --z-sticky:   100;
  --z-dropdown: 200;
  --z-floating: 300;
  --z-modal:    1000;
  --z-toast:    1100;
}

/* ==========================================================================
   BASE RESET & TYPOGRAPHY DEFAULTS
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-relaxed);
  color: var(--color-dark-text);
  background-color: var(--color-ivory-bg);
  min-width: 1280px; /* Phase 1 target desktop 1440px scope */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-dark-text);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}

p {
  margin-bottom: var(--space-4);
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

ul, ol {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button,
input,
select,
textarea {
  font-family: var(--font-body);
  font-size: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* Accessible Focus States */
:focus-visible {
  outline: 2px solid var(--color-primary-burgundy);
  outline-offset: 3px;
}

.section-dark :focus-visible {
  outline-color: var(--color-champagne-gold);
}

/* Skip Link for Keyboard Accessibility */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-6);
  background: var(--color-primary-burgundy);
  color: var(--color-white);
  padding: var(--space-3) var(--space-5);
  font-weight: 600;
  z-index: var(--z-toast);
  border-radius: var(--radius-xs);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-4);
}

/* Layout Container (1240px content width + 32px*2 padding = 1304px max box, centered on 1440px) */
.container {
  width: 100%;
  max-width: calc(var(--container-max) + (var(--container-padding) * 2));
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* Reduced Motion Compliance */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}