/* ==========================================================================
   DTL Accounting — Design Tokens
   3-tier architecture: Primitive -> Semantic -> Component
   Components must only consume Semantic or Component tokens.
   Never reference Primitive tokens directly inside component CSS.
   ========================================================================== */

   :root {

      /* ------------------------------------------------------------------------
         1. PRIMITIVE TOKENS
         ------------------------------------------------------------------------ */
    
      /* 1.1 Brand — Navy (Primary) */
      --navy-900: #0A1F3D;
      --navy-800: #0F2A52;
      --navy-700: #153968;
      --navy-600: #1D4A8C;
      --navy-500: #2E5FA3;
      --navy-400: #5C82BE;
      --navy-300: #93AFD6;
      --navy-200: #C3D5EB;
      --navy-100: #E4ECF6;
      --navy-50:  #F3F7FC;
    
      /* 1.2 Brand — Gold (Accent) */
      --gold-900: #6B4A00;
      --gold-800: #8A6100;
      --gold-700: #A87A11;
      --gold-600: #C6941F;
      --gold-500: #D8AA45;
      --gold-400: #E4C170;
      --gold-300: #EFD79E;
      --gold-200: #F6E8C6;
      --gold-100: #FBF3E3;
      --gold-50:  #FDF9F0;
    
      /* 1.3 Neutral */
      --neutral-white: #FFFFFF;
      --neutral-50:  #F9FAFB;
      --neutral-100: #F3F4F6;
      --neutral-200: #E5E7EB;
      --neutral-300: #D1D5DB;
      --neutral-400: #9CA3AF;
      --neutral-500: #6B7280;
      --neutral-600: #4B5563;
      --neutral-700: #333A44;
      --neutral-800: #1F242C;
      --neutral-900: #111418;
    
      /* 1.4 Status */
      --green-600: #1E7B45;
      --green-50:  #EAF7EF;
      --red-600:   #C42B2B;
      --red-50:    #FCEAEA;
      --amber-600: #B4740E;
      --amber-50:  #FDF3E2;
      --sky-600:   #0C7BB3;
      --sky-50:    #E6F4FA;
    
      /* 1.5 Typography primitives */
      --font-family-base: "Be Vietnam Pro", "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
    
      --font-size-xs:  0.75rem;
      --font-size-sm:  0.875rem;
      --font-size-base: 1rem;
      --font-size-md:  1.125rem;
      --font-size-lg:  1.25rem;
      --font-size-xl:  1.5rem;
      --font-size-2xl: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
      --font-size-3xl: clamp(2rem, 1.6rem + 2vw, 3rem);
    
      --font-weight-regular:  400;
      --font-weight-medium:   500;
      --font-weight-semibold: 600;
      --font-weight-bold:     700;
    
      --line-height-tight:   1.2;
      --line-height-normal:  1.5;
      --line-height-relaxed: 1.7;
    
      /* 1.6 Spacing primitives */
      --space-1:  0.25rem; /* 4px */
      --space-2:  0.5rem;  /* 8px */
      --space-3:  0.75rem; /* 12px */
      --space-4:  1rem;    /* 16px */
      --space-6:  1.5rem;  /* 24px */
      --space-8:  2rem;    /* 32px */
      --space-12: 3rem;    /* 48px */
      --space-16: 4rem;    /* 64px */
      --space-20: 5rem;    /* 80px */
    
      /* 1.7 Radius primitives */
      --radius-sm:   4px;
      --radius-md:   8px;
      --radius-lg:   12px;
      --radius-full: 9999px;
    
      /* 1.8 Border width primitives */
      --border-width-sm: 1px;
      --border-width-md: 1.5px;
      --border-width-lg: 2px;
    
      /* 1.9 Shadow primitives */
      --shadow-sm: 0 1px 2px rgba(17, 20, 24, 0.06);
      --shadow-md: 0 4px 12px rgba(17, 20, 24, 0.08);
      --shadow-lg: 0 8px 24px rgba(17, 20, 24, 0.10);
    
      /* 1.10 Layout primitives */
      --container-max-width: 1200px;
      --container-padding-inline: 1rem;
      --header-height: 72px;
    
      /* 1.11 Breakpoint primitives (reference only — see note in design_tokens.md) */
      --breakpoint-sm: 640px;
      --breakpoint-md: 768px;
      --breakpoint-lg: 1024px;
      --breakpoint-xl: 1280px;
    
    
      /* ------------------------------------------------------------------------
         2. SEMANTIC TOKENS — components should consume these
         ------------------------------------------------------------------------ */
    
      /* 2.1 Text */
      --color-text-primary:    var(--neutral-900);
      --color-text-secondary:  var(--neutral-600);
      --color-text-muted:      var(--neutral-500);
      --color-text-disabled:   var(--neutral-400);
      --color-text-on-brand:   var(--neutral-white);
      --color-text-link:       var(--navy-600);
      --color-text-link-hover: var(--navy-700);
    
      /* 2.2 Surface & Border */
      --color-surface:            var(--neutral-white);
      --color-surface-alt:        var(--neutral-50);
      --color-surface-tinted:     var(--navy-50);
      --color-surface-inverse:    var(--navy-900);
      --color-border:              var(--neutral-200);
      --color-border-strong:       var(--neutral-300);
      --color-border-on-inverse:   var(--navy-700);
    
      /* 2.3 Action */
      --color-action-primary:            var(--navy-600);
      --color-action-primary-hover:      var(--navy-700);
      --color-action-primary-active:     var(--navy-800);
      --color-action-secondary-border:   var(--navy-600);
      --color-action-secondary-hover-bg: var(--navy-50);
      --color-action-accent:             var(--gold-600);
      --color-action-accent-hover:       var(--gold-700);
      --color-action-disabled-bg:        var(--neutral-200);
      --color-action-disabled-text:      var(--neutral-400);
    
      /* 2.4 Status */
      --color-success-text:   var(--green-600);
      --color-success-bg:     var(--green-50);
      --color-success-border: var(--green-600);
      --color-error-text:     var(--red-600);
      --color-error-bg:       var(--red-50);
      --color-error-border:   var(--red-600);
      --color-warning-text:   var(--amber-600);
      --color-warning-bg:     var(--amber-50);
      --color-warning-border: var(--amber-600);
      --color-info-text:      var(--sky-600);
      --color-info-bg:        var(--sky-50);
      --color-info-border:    var(--sky-600);
    
      /* 2.5 Focus */
      --color-focus-ring:       var(--navy-500);
      --color-focus-ring-error: var(--red-600);
      --focus-ring-width:  2px;
      --focus-ring-offset: 2px;
      --focus-ring-style:  solid;
    
    
      /* ------------------------------------------------------------------------
         3. FORM STATE TOKENS (maps to components/form.md states)
         ------------------------------------------------------------------------ */
      --input-border-default:  var(--color-border);
      --input-border-focus:    var(--color-focus-ring);
      --input-border-error:    var(--color-error-border);
      --input-border-disabled: var(--color-border);
      --input-bg-default:  var(--color-surface);
      --input-bg-disabled: var(--color-surface-alt);
    
    
      /* ------------------------------------------------------------------------
         4. COMPONENT TOKENS — only when semantic tokens are not specific enough
         ------------------------------------------------------------------------ */
    
      /* 4.1 Button */
      --button-primary-bg:        var(--color-action-primary);
      --button-primary-bg-hover:  var(--color-action-primary-hover);
      --button-primary-bg-active: var(--color-action-primary-active);
      --button-primary-text:      var(--color-text-on-brand);
      --button-primary-radius:    var(--radius-md);
    
      --button-secondary-border:      var(--color-action-secondary-border);
      --button-secondary-text:        var(--color-action-primary);
      --button-secondary-bg-hover:    var(--color-action-secondary-hover-bg);
      --button-secondary-radius:      var(--radius-md);
    
      --button-disabled-bg:   var(--color-action-disabled-bg);
      --button-disabled-text: var(--color-action-disabled-text);
    
      /* 4.2 Input (Form Component) */
      --input-border:          var(--input-border-default);
      --input-bg:              var(--input-bg-default);
      --input-radius:          var(--radius-md);
      --input-padding-block:   var(--space-3);
      --input-padding-inline:  var(--space-4);
    
      /* 4.3 Navigation */
      --nav-bg:                     var(--color-surface);
      --nav-height:                 var(--header-height);
      --nav-link-text:               var(--color-text-primary);
      --nav-link-text-active:        var(--color-action-primary);
      --nav-border-bottom-sticky:    var(--color-border);
    
      /* 4.4 Breadcrumb */
      --breadcrumb-text:         var(--color-text-secondary);
      --breadcrumb-text-current: var(--color-text-primary);
      --breadcrumb-separator:    var(--color-text-muted);
    
      /* 4.5 Notification */
      --notification-success-bg:     var(--color-success-bg);
      --notification-success-border: var(--color-success-border);
      --notification-success-text:   var(--color-success-text);
      --notification-error-bg:       var(--color-error-bg);
      --notification-error-border:   var(--color-error-border);
      --notification-error-text:     var(--color-error-text);
      --notification-warning-bg:     var(--color-warning-bg);
      --notification-warning-border: var(--color-warning-border);
      --notification-warning-text:   var(--color-warning-text);
      --notification-info-bg:        var(--color-info-bg);
      --notification-info-border:    var(--color-info-border);
      --notification-info-text:      var(--color-info-text);
    
      /* 4.6 Footer (inverse surface) */
      --footer-bg:          var(--color-surface-inverse);
      --footer-text:        var(--neutral-200);
      --footer-text-muted:  var(--navy-300);
      --footer-link-hover:  var(--gold-400);
      --footer-border:      var(--color-border-on-inverse);
    
      /* 4.7 Card */
      --card-bg:      var(--color-surface);
      --card-border:  var(--color-border);
      --card-radius:  var(--radius-lg);
      --card-shadow:  var(--shadow-sm);
      --card-shadow-hover: var(--shadow-md);
    
      /* ------------------------------------------------------------------------
         5. NEW COMPONENT TOKENS — added for Contact Page implementation
         Added at Component tier only (no Semantic token was specific enough).
         ------------------------------------------------------------------------ */
    
      /* 5.1 Navigation — mobile drawer + overlay */
      --nav-mobile-breakpoint: 1024px; /* mirrors --breakpoint-lg; kept literal for @media use, see design_tokens.md §11 */
      --nav-drawer-width: min(85vw, 360px);
      --nav-drawer-bg: var(--color-surface);
      --nav-drawer-shadow: var(--shadow-lg);
      --color-overlay: color-mix(in srgb, var(--neutral-900) 55%, transparent);
    
      /* 5.2 Z-index scale */
      --z-header: 50;
      --z-overlay: 60;
      --z-drawer: 70;
      --z-skip-link: 100;
    
      /* 5.3 Map */
      --map-radius: var(--radius-lg);
      --map-border: var(--color-border);
      --map-height-mobile: 320px;
    
      /* 5.4 Icon sizing (functional, not decorative colors) */
      --icon-size-sm: 1rem;
      --icon-size-md: 1.25rem;
      --icon-size-lg: 1.5rem;
    
      /* 5.5 Third-party brand marks — kept as literal brand colors
         (Zalo, Facebook) since recognizability of these external services
         depends on their own identity, not the site's palette. Never reused
         for any in-house UI. */
      --brand-zalo: #0068FF;
      --brand-facebook: #1877F2;
    
      /* 5.6 Floating Actions + Scroll-to-top */
      --floating-actions-bg: var(--color-surface);
      --floating-actions-shadow: var(--shadow-lg);
      --floating-actions-radius: var(--radius-lg);
      --floating-actions-gap: var(--space-4);
      --floating-actions-offset: var(--space-6);
    
      --floating-action-zalo-bg: var(--brand-zalo);
      --floating-action-facebook-bg: var(--brand-facebook);
      --floating-action-hotline-bg: var(--color-action-accent);
      --floating-action-form-bg: var(--color-action-primary);
      --floating-action-icon-text: var(--neutral-white);
      --floating-action-size: 44px;
    
      --scroll-top-bg: var(--color-surface);
      --scroll-top-border: var(--color-action-accent);
      --scroll-top-icon: var(--color-action-accent);
      --scroll-top-size: 40px;
    
      --z-floating-actions: 40;
    }