/* ==========================================================================
   INFINITI THE V - 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: #B9EB00;
  --brand-red-hover: #D5FF2A;
  --brand-red-dark: #8FBF00;
  --brand-red-subtle: rgba(185, 235, 0, 0.12);

  --navy-950: #090C0B; /* Deepest navy: Header, Footer */
  --navy-900: #0F1412; /* Primary dominant navy: Page background */
  --navy-800: #151B18; /* Main sections: Featured Projects, Bars */
  --navy-700: #1C2520; /* Elevated cards / surfaces */
  --navy-650: #24302A; /* Card hover state */
  --navy-thumb: #0C100E; /* Image placeholder background */

  --blue-600: #6D9400; /* Brand green accent */
  --blue-500: #5F6A61; /* Muted sage */
  --blue-400: #7D8A82; /* Secondary sage */
  --blue-300: #A8B1AA; /* Soft border */
  --blue-200: #D5FF2A; /* Lime highlight */

  --white: #FFFFFF;
  --light-50: #F5F6F1;
  --light-100: #EDF1E8;
  --light-200: #D5DDD0;
  --light-300: #A8B1AA;

  /* ------------------------------------------------------------------------
     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: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --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 8% 8%, rgba(185, 235, 0, 0.28) 0%, transparent 28%),
    radial-gradient(circle at 92% 12%, rgba(123, 97, 255, 0.32) 0%, transparent 30%),
    radial-gradient(circle at 84% 78%, rgba(255, 92, 122, 0.26) 0%, transparent 32%),
    radial-gradient(circle at 18% 86%, rgba(34, 211, 238, 0.18) 0%, transparent 28%),
    linear-gradient(135deg, #090C0B 0%, #121018 52%, #151B18 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(185, 235, 0, 0.22);
  --ambient-earth: rgba(232, 172, 78, 0.16);
  --ambient-surface: rgba(15, 20, 18, 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: #11170a;
  --footer-copyright-text: #F4F7EF;

  --section-bg: var(--ambient-surface);
  --section-alt-bg: var(--ambient-surface-alt);
  --stats-bg: #151B18;
  --why-choose-bg: #151B18;
  --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(15, 20, 18, 0.98) 0%, rgba(15, 20, 18, 0.88) 45%, rgba(17, 22, 17, 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(105deg, #B9EB00 0%, #22D3EE 46%, #7B61FF 100%);
  --contact-cta-heading: #11170a;
  --contact-cta-text: #1c2520;
  --contact-cta-muted: #AFC2DA;
  --contact-cta-outline: rgba(175, 194, 218, 0.15);
  --contact-cta-phone-bg: rgba(17, 22, 17, 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(17, 22, 17, 0.7);

  --pill-bg: var(--navy-800);
  --pill-border: var(--border-soft);
  --icon-box-bg: var(--navy-900);
  --placeholder-badge-bg: rgba(17, 22, 17, 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: #11170a;
  --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(185, 235, 0, 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(185, 235, 0, 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 6% 0%, rgba(185, 235, 0, 0.42) 0%, transparent 28%),
    radial-gradient(circle at 96% 8%, rgba(123, 97, 255, 0.28) 0%, transparent 26%),
    radial-gradient(circle at 88% 92%, rgba(255, 92, 122, 0.22) 0%, transparent 30%),
    radial-gradient(circle at 20% 100%, rgba(34, 211, 238, 0.2) 0%, transparent 26%),
    linear-gradient(180deg, #F7FBEA 0%, #F4F7FF 52%, #FFF6F8 100%);
  --ambient-grid-line: rgba(17, 22, 17, 0.09);
  --ambient-ring: rgba(109, 148, 0, 0.22);
  --ambient-metal: rgba(17, 22, 17, 0.12);
  --ambient-water: rgba(14, 116, 144, 0.14);
  --ambient-wood: rgba(42, 137, 93, 0.11);
  --ambient-fire: rgba(185, 235, 0, 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: #F7F8F4;
  --header-bg: #FFFFFF;
  --header-border: #D5DDD0;
  --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: #11170a;
  --footer-copyright-text: #F4F7EF;

  --section-bg: var(--ambient-surface);
  --section-alt-bg: var(--ambient-surface-alt);
  --stats-bg: #ffffff;
  --why-choose-bg: #ffffff;
  --hero-bg: #F4FFE4;
  --hero-grid-line: rgba(109, 148, 0, 0.08);
  --hero-frame-line: rgba(17, 22, 17, 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(105deg, #5B21B6 0%, #DB2777 54%, #F59E0B 100%);
  --contact-cta-bg: linear-gradient(105deg, #B9EB00 0%, #22D3EE 46%, #7B61FF 100%);
  --contact-cta-heading: #11170a;
  --contact-cta-text: #1c2520;
  --contact-cta-muted: #AFC2DA;
  --contact-cta-outline: rgba(175, 194, 218, 0.2);
  --contact-cta-phone-bg: rgba(17, 22, 17, 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: #6D9400;
  --project-card-bg: #FFFFFF;
  --project-info-bg: #F8FAFC;
  --thumb-bg: #EAEFF6;
  --logo-badge-bg: linear-gradient(135deg, #1C2520, #090C0B);
  --hotline-badge-bg: rgba(17, 22, 17, 0.85);

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

  /* Typography */
  --text-primary: #111611;
  --text-secondary: #3D4A42;
  --text-muted: #5F6A61;
  --text-dim: #6E7A72;
  --text-accent: #577600;
  --link-more: #577600;
  --link-more-hover: #111611;

  /* 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: #11170a;
  --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: #6D9400;

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

  /* Theme Toggle Button */
  --theme-toggle-bg: #F1F5FA;
  --theme-toggle-border: #CAD8E8;
  --theme-toggle-color: #090C0B;
  --theme-toggle-hover-bg: #E2E8F0;
  --theme-toggle-hover-color: #577600;

  /* Modals */
  --modal-backdrop-bg: rgba(17, 22, 17, 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(185, 235, 0, 0.4);

  --shadow-sm: 0 2px 6px rgba(17, 22, 17, 0.05);
  --shadow-card: 0 3px 12px rgba(17, 22, 17, 0.07);
  --shadow-hover: 0 8px 24px rgba(17, 22, 17, 0.12);
  --shadow-cta: 0 3px 10px rgba(185, 235, 0, 0.25);
}