@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400;1,700&display=swap&subset=vietnamese');

:root {
    /* Color Palette */
    --color-primary: #163d46;      /* Mineral teal */
    --color-primary-dark: #0c252b; /* Deep technical charcoal */
    --color-secondary: #FDA10D;    /* Controlled brass CTA */
    --color-success: #2f8d68;      /* Process green */
    --color-danger: #bf4c3b;       /* Alarm red */
    
    --color-text: #16221f;         /* Ink with green undertone */
    --color-text-light: #586763;   /* Quiet body copy */
    --color-text-muted: #7c8b86;   /* Muted metadata */
    
    --color-bg: #f3f6f2;           /* Warm industrial mist */
    --color-bg-white: #fffefa;     /* Soft white surface */
    --color-bg-alt: #e8eee8;       /* Technical panel wash */
    --color-surface: #fbfbf5;      /* Elevated surface */
    --color-dark: #0d262c;         /* Header/footer base */
    
    --color-border: #d9e2dc;       /* Default Border */
    --color-border-dark: #aab9b2;  /* Darker Border */
    
    /* Fonts */
    --font-primary: 'Roboto', Arial, "Helvetica Neue", sans-serif;
    --font-mono: 'Roboto', Arial, "Helvetica Neue", sans-serif;
    
    /* Font Sizes */
    --fs-xs: 0.75rem;     /* 12px */
    --fs-sm: 0.875rem;    /* 14px */
    --fs-base: 1rem;      /* 16px */
    --fs-lg: 1.125rem;    /* 18px */
    --fs-xl: 1.25rem;     /* 20px */
    --fs-2xl: 1.5rem;     /* 24px */
    --fs-3xl: 1.875rem;   /* 30px */
    --fs-4xl: 2.25rem;    /* 36px */
    --fs-5xl: 3.375rem;   /* 54px */
    
    /* Spacing */
    --space-xxs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 5.5rem;
    
    /* Layout Widths */
    --container-max-width: 1240px;
    --container-padding: 1.5rem;
    
    /* Transitions */
    --transition-fast: 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-slow: 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
    
    /* Border Radius */
    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-lg: 8px;
    
    /* Box Shadows (Subtle, Clean) */
    --shadow-sm: 0 1px 2px rgba(13, 38, 44, 0.08);
    --shadow-md: 0 14px 30px rgba(13, 38, 44, 0.1), 0 2px 8px rgba(13, 38, 44, 0.05);
    --shadow-lg: 0 24px 60px rgba(13, 38, 44, 0.16), 0 8px 20px rgba(13, 38, 44, 0.08);
    --focus-ring: 0 0 0 3px rgba(201, 133, 47, 0.32);
}