/* ==========================================================================
   KDK VIETNAM — 1. BASE MODULE (Variables, Reset, Typography, Utilities)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Brand Crimson & Tailored Colors */
  --primary:          #ed1b24;
  --primary-dark:     #b80f16;
  --primary-light:    #fff0f1;
  --primary-glow:     rgba(237, 27, 36, 0.25);
  --accent-pink:      #ffa3ab;
  
  --grad-primary:     linear-gradient(135deg, #ed1b24 0%, #b80f16 100%);
  --grad-dark:        linear-gradient(180deg, #11141a 0%, #08090d 100%);
  --grad-surface:     linear-gradient(135deg, #181d29 0%, #0f121a 100%);

  /* Surface Neutrals */
  --dark:             #0b0d12;
  --dark-surface:     #131720;
  --dark-card:        #1a1f2c;
  --dark-border:      rgba(255, 255, 255, 0.12);

  --white:            #ffffff;
  --bg-light:         #f8fafc;
  --border-light:     #e2e8f0;
  --border-hover:     #cbd5e1;
  
  /* Text Contrast System */
  --text-dark:        #0f172a;
  --text-body:        #334155;
  --text-muted:       #64748b;
  --text-light:       #f8fafc;

  /* Shadows & Curves */
  --radius-sm:        8px;
  --radius-md:        12px;
  --radius-lg:        18px;
  --radius-xl:        24px;
  --shadow-subtle:    0 4px 20px rgba(0, 0, 0, 0.04);
  --shadow-card:      0 10px 30px -5px rgba(0, 0, 0, 0.07);
  --shadow-hover:     0 20px 40px -10px rgba(237, 27, 36, 0.15);
  
  --transition:       all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-body);
  background-color: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Lora', Georgia, serif;
  color: var(--text-dark);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.2px;
}

button, input, select, textarea {
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

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

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

ul, ol {
  list-style: none;
}

/* Common Utilities */
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }
.muted { color: var(--text-muted) !important; }
.d-flex { display: flex !important; }
.align-center { align-items: center !important; }
.justify-center { justify-content: center !important; }
.full-width { width: 100% !important; }

.margin-top-15 { margin-top: 15px !important; }
.margin-top-20 { margin-top: 20px !important; }
.margin-top-40 { margin-top: 40px !important; }
.margin-bottom-40 { margin-bottom: 40px !important; }
.margin-y-15 { margin-top: 15px !important; margin-bottom: 15px !important; }
.padding-40 { padding: 40px !important; }

.card-box {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-card);
}