/* ==========================================================================
   ASUS J.S.C - Design Tokens & Semantic Variables Architecture
   Theme: Premium Dark Blue / Navy Architectural (Default) + Light Theme
   Reference: images/reference/kieu-2-reference.png
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     1. Base Palette Primitives (Approved Master Color Palette)
     ------------------------------------------------------------------------ */
  --brand-red: #D71E26;
  --brand-red-hover: #E93C36;
  --brand-red-dark: #B8323F;
  --brand-red-subtle: rgba(215, 30, 38, 0.12);

  --navy-950: #042052; /* Deepest navy: Header, Footer */
  --navy-900: #022963; /* Primary dominant navy: Page background */
  --navy-800: #023072; /* Main sections: Featured Projects, Bars */
  --navy-700: #0A3D83; /* Elevated cards / surfaces */
  --navy-650: #0E4C9C; /* Card hover state */
  --navy-thumb: #03204E; /* Image placeholder background */

  --blue-600: #0C52A8; /* Blue accent & highlights */
  --blue-500: #244578; /* Muted blue */
  --blue-400: #426394; /* Secondary blue */
  --blue-300: #5A82B8; /* Light blue accent & borders */
  --blue-200: #8DBBEB; /* Cyan/Ice blue highlight */

  --white: #FFFFFF;
  --light-50: #F9FAFD;
  --light-100: #E9EEF5;
  --light-200: #CAD8E8;
  --light-300: #AFB7C9;

  /* ------------------------------------------------------------------------
     2. Layout, Radius & Typography Specs
     ------------------------------------------------------------------------ */
  --container: 1280px;
  --container-wide: 1360px;
  --header-height: 64px;
  --space-section: clamp(32px, 3.6vw, 50px);
  --space-gap: clamp(14px, 1.6vw, 20px);

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 9999px;

  --font-main: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --transition-fast: 0.15s ease;
  --transition-normal: 0.20s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   DEFAULT / DARK THEME TOKENS (:root and [data-theme="dark"])
   Preserves 100% pixel-perfect approved Phase 2 Dark Theme.
   ========================================================================== */
:root,
[data-theme="dark"] {
  /* Surfaces & Backgrounds */
  --ambient-background:
    radial-gradient(circle at 10% 6%, rgba(215, 30, 38, 0.13) 0%, transparent 30%),
    radial-gradient(circle at 92% 70%, rgba(39, 190, 202, 0.12) 0%, transparent 34%),
    linear-gradient(135deg, #01152F 0%, #022963 52%, #06224D 100%);
  --ambient-grid-line: rgba(141, 187, 235, 0.10);
  --ambient-ring: rgba(141, 187, 235, 0.28);
  --ambient-metal: rgba(207, 229, 255, 0.16);
  --ambient-water: rgba(39, 190, 202, 0.20);
  --ambient-wood: rgba(61, 177, 125, 0.14);
  --ambient-fire: rgba(215, 30, 38, 0.22);
  --ambient-earth: rgba(232, 172, 78, 0.16);
  --ambient-surface: rgba(2, 41, 99, 0.76);
  --ambient-surface-alt: rgba(2, 48, 114, 0.70);
  --page-bg: var(--navy-900);
  --header-bg: var(--navy-950);
  --header-border: var(--border-soft);
  --mobile-nav-bg: var(--navy-950);
  --footer-bg: var(--navy-950);
  --footer-border: var(--border-soft);
  --footer-heading: var(--white);
  --footer-text: #DCE7F5;
  --footer-text-muted: #AFC2DA;
  --footer-link: #DCE7F5;
  --footer-link-hover: var(--white);
  --footer-icon-color: var(--blue-200);
  --footer-icon-bg: var(--navy-800);
  --footer-copyright-bg: var(--brand-red);
  --footer-copyright-text: var(--white);

  --section-bg: var(--ambient-surface);
  --section-alt-bg: var(--ambient-surface-alt);
  --stats-bg: rgba(2, 48, 114, 0.82);
  --why-choose-bg: rgba(2, 48, 114, 0.82);
  --hero-bg: var(--navy-950);
  --hero-grid-line: rgba(141, 187, 235, 0.1);
  --hero-frame-line: rgba(141, 187, 235, 0.28);
  --hero-overlay-linear: linear-gradient(90deg, rgba(2, 41, 99, 0.98) 0%, rgba(2, 41, 99, 0.88) 45%, rgba(4, 32, 82, 0.4) 100%);
  --hero-overlay-radial: radial-gradient(ellipse at 80% 40%, rgba(10, 61, 131, 0.35) 0%, transparent 60%);
  --page-hero-bg: linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 100%);
  --contact-cta-bg: linear-gradient(135deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--navy-700) 100%);
  --contact-cta-heading: var(--white);
  --contact-cta-text: #DCE7F5;
  --contact-cta-muted: #AFC2DA;
  --contact-cta-outline: rgba(175, 194, 218, 0.15);
  --contact-cta-phone-bg: rgba(4, 32, 82, 0.7);
  --contact-cta-phone-text: var(--white);
  --contact-cta-phone-border: rgba(90, 130, 184, 0.4);

  /* Cards & Surfaces */
  --card-bg: var(--navy-700);
  --card-bg-hover: var(--navy-650);
  --card-border: var(--border-card);
  --card-border-hover: var(--blue-300);
  --project-card-bg: var(--navy-950);
  --project-info-bg: var(--navy-900);
  --thumb-bg: var(--navy-thumb);
  --logo-badge-bg: linear-gradient(135deg, var(--navy-700), var(--navy-900));
  --hotline-badge-bg: rgba(4, 32, 82, 0.7);

  --pill-bg: var(--navy-800);
  --pill-border: var(--border-soft);
  --icon-box-bg: var(--navy-900);
  --placeholder-badge-bg: rgba(4, 32, 82, 0.4);
  --placeholder-badge-border: var(--border-card);

  /* Typography */
  --text-primary: var(--white);
  --text-secondary: #DCE7F5;
  --text-muted: #AFC2DA;
  --text-dim: #849ebd;
  --text-accent: var(--brand-red);
  --link-more: var(--blue-200);
  --link-more-hover: var(--white);

  /* Interactive & Controls */
  --btn-cta-bg: var(--brand-red);
  --btn-cta-hover: var(--brand-red-hover);
  --btn-cta-active: var(--brand-red-dark);
  --btn-cta-text: var(--white);
  --social-btn-bg: var(--navy-800);
  --social-btn-hover: var(--brand-red);
  --nav-indicator-color: var(--brand-red);
  --carousel-dot-bg: var(--blue-500);
  --carousel-dot-active: var(--blue-300);

  /* Form Inputs */
  --input-bg: var(--navy-900);
  --input-border: var(--border-soft);
  --input-text: var(--white);
  --input-placeholder: var(--text-dim);

  /* Theme Toggle Button */
  --theme-toggle-bg: rgba(255, 255, 255, 0.08);
  --theme-toggle-border: rgba(175, 194, 218, 0.25);
  --theme-toggle-color: #AFC2DA;
  --theme-toggle-hover-bg: rgba(255, 255, 255, 0.15);
  --theme-toggle-hover-color: var(--white);

  /* Modals */
  --modal-backdrop-bg: rgba(2, 20, 50, 0.85);
  --modal-bg: var(--navy-800);
  --modal-header-bg: var(--navy-950);
  --modal-footer-bg: var(--navy-950);
  --modal-img-bg: var(--navy-950);

  /* Borders & Shadows */
  --border-soft: rgba(175, 194, 218, 0.15);
  --border-card: rgba(90, 130, 184, 0.25);
  --border-accent: rgba(215, 30, 38, 0.4);

  --shadow-sm: 0 2px 6px rgba(0, 12, 35, 0.2);
  --shadow-card: 0 4px 16px rgba(0, 14, 40, 0.28);
  --shadow-hover: 0 8px 24px rgba(0, 20, 60, 0.4);
  --shadow-cta: 0 3px 10px rgba(215, 30, 38, 0.35);
}

/* ==========================================================================
   LIGHT THEME OVERRIDES ([data-theme="light"])
   Refined European architectural corporate aesthetic.
   Deep Navy typography + Light blue surfaces + Branded Navy CTA & Footer.
   ========================================================================== */
[data-theme="light"] {
  /* Surfaces & Backgrounds */
  --ambient-background:
    radial-gradient(circle at 12% 4%, rgba(215, 30, 38, 0.08) 0%, transparent 30%),
    radial-gradient(circle at 90% 70%, rgba(14, 116, 144, 0.10) 0%, transparent 34%),
    linear-gradient(135deg, #F8FBFF 0%, #EDF3FA 52%, #F7F4EC 100%);
  --ambient-grid-line: rgba(4, 32, 82, 0.09);
  --ambient-ring: rgba(12, 82, 168, 0.22);
  --ambient-metal: rgba(4, 32, 82, 0.12);
  --ambient-water: rgba(14, 116, 144, 0.14);
  --ambient-wood: rgba(42, 137, 93, 0.11);
  --ambient-fire: rgba(215, 30, 38, 0.14);
  --ambient-earth: rgba(180, 119, 36, 0.12);
  --ambient-surface: rgba(255, 255, 255, 0.78);
  --ambient-surface-alt: rgba(241, 245, 250, 0.72);
  --page-bg: #F9FAFD;
  --header-bg: #FFFFFF;
  --header-border: #D8E2EE;
  --mobile-nav-bg: #FFFFFF;
  --footer-bg: var(--navy-950); /* Branded Deep Navy Footer */
  --footer-border: rgba(175, 194, 218, 0.15);
  --footer-heading: #FFFFFF;
  --footer-text: #DCE7F5;
  --footer-text-muted: #AFC2DA;
  --footer-link: #DCE7F5;
  --footer-link-hover: #FFFFFF;
  --footer-icon-color: #8DBBEB;
  --footer-icon-bg: var(--navy-800);
  --footer-copyright-bg: var(--brand-red);
  --footer-copyright-text: #FFFFFF;

  --section-bg: var(--ambient-surface);
  --section-alt-bg: var(--ambient-surface-alt);
  --stats-bg: rgba(255, 255, 255, 0.80);
  --why-choose-bg: rgba(255, 255, 255, 0.80);
  --hero-bg: #EDF3FA; /* Light Blue Architectural Surface */
  --hero-grid-line: rgba(12, 82, 168, 0.08);
  --hero-frame-line: rgba(4, 32, 82, 0.16);
  --hero-overlay-linear: linear-gradient(90deg, rgba(237, 243, 250, 0.98) 0%, rgba(241, 245, 250, 0.92) 50%, rgba(249, 250, 253, 0.6) 100%);
  --hero-overlay-radial: radial-gradient(ellipse at 80% 40%, rgba(202, 216, 232, 0.45) 0%, transparent 70%);
  --page-hero-bg: linear-gradient(180deg, #FFFFFF 0%, #EDF3FA 100%);
  --contact-cta-bg: linear-gradient(135deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--navy-700) 100%); /* Branded Deep Navy CTA */
  --contact-cta-heading: #FFFFFF;
  --contact-cta-text: #DCE7F5;
  --contact-cta-muted: #AFC2DA;
  --contact-cta-outline: rgba(175, 194, 218, 0.2);
  --contact-cta-phone-bg: rgba(4, 32, 82, 0.85);
  --contact-cta-phone-text: #FFFFFF;
  --contact-cta-phone-border: rgba(141, 187, 235, 0.4);

  /* Cards & Surfaces */
  --card-bg: #FFFFFF;
  --card-bg-hover: #FFFFFF;
  --card-border: #D8E2EE;
  --card-border-hover: #0C52A8;
  --project-card-bg: #FFFFFF;
  --project-info-bg: #F8FAFC;
  --thumb-bg: #EAEFF6;
  --logo-badge-bg: linear-gradient(135deg, #0A3D83, #042052);
  --hotline-badge-bg: rgba(4, 32, 82, 0.85);

  --pill-bg: #F1F5FA;
  --pill-border: #CAD8E8;
  --icon-box-bg: #F1F5FA;
  --placeholder-badge-bg: #F8FAFC;
  --placeholder-badge-border: #CAD8E8;

  /* Typography */
  --text-primary: #042052;      /* Deep Navy primary text */
  --text-secondary: #244578;    /* Muted Navy/Blue for high legibility */
  --text-muted: #426394;        /* Secondary Blue */
  --text-dim: #64748B;          /* Slate/dim navy for dates & captions */
  --text-accent: #D71E26;       /* Signature Brand Red */
  --link-more: #0C52A8;         /* Professional Blue link */
  --link-more-hover: #D71E26;   /* Red hover */

  /* Interactive & Controls */
  --btn-cta-bg: var(--brand-red);
  --btn-cta-hover: var(--brand-red-hover);
  --btn-cta-active: var(--brand-red-dark);
  --btn-cta-text: var(--white);
  --social-btn-bg: var(--navy-800);
  --social-btn-hover: var(--brand-red);
  --nav-indicator-color: var(--brand-red);
  --carousel-dot-bg: #CAD8E8;
  --carousel-dot-active: #0C52A8;

  /* Form Inputs */
  --input-bg: #FFFFFF;
  --input-border: #CAD8E8;
  --input-text: #042052;
  --input-placeholder: #94A3B8;

  /* Theme Toggle Button */
  --theme-toggle-bg: #F1F5FA;
  --theme-toggle-border: #CAD8E8;
  --theme-toggle-color: #042052;
  --theme-toggle-hover-bg: #E2E8F0;
  --theme-toggle-hover-color: #D71E26;

  /* Modals */
  --modal-backdrop-bg: rgba(4, 32, 82, 0.65);
  --modal-bg: #FFFFFF;
  --modal-header-bg: #F8FAFC;
  --modal-footer-bg: #F8FAFC;
  --modal-img-bg: #EAEFF6;

  /* Borders & Shadows */
  --border-soft: #E2E8F0;
  --border-card: #D8E2EE;
  --border-accent: rgba(215, 30, 38, 0.4);

  --shadow-sm: 0 2px 6px rgba(4, 32, 82, 0.05);
  --shadow-card: 0 3px 12px rgba(4, 32, 82, 0.07);
  --shadow-hover: 0 8px 24px rgba(4, 32, 82, 0.12);
  --shadow-cta: 0 3px 10px rgba(215, 30, 38, 0.25);
}