/* ===================================
   Phượng Hoàng V2: Design System
   Premium Enterprise Industrial Technology
   Dark-first · Spring Physics · Asymmetric
   =================================== */

/* ── FOUC Prevention (reinforced) ── */
html:not([data-theme]) { visibility: hidden; }

/* ═══════════ CUSTOM PROPERTIES ═══════════ */
:root {
  /* Native rendering follows the theme (scrollbars, form controls, caret):
     supplements the CSS variable system, does NOT replace it. */
  color-scheme: dark;

  /* Typography: Plus Jakarta Sans (display + body), JetBrains Mono (data).
     Display switched from Outfit (2026-08-13): Outfit ships no vietnamese
     subset on Google Fonts, so headings rendered with mixed system-font
     glyphs on every Vietnamese word. Plus Jakarta Sans has a full
     vietnamese subset (Google + '… Local' self-hosted fallback). */
  --ph-font-display: 'Plus Jakarta Sans', 'Plus Jakarta Sans Local', system-ui, -apple-system, sans-serif;
  --ph-font-body: 'Plus Jakarta Sans', 'Plus Jakarta Sans Local', system-ui, -apple-system, sans-serif;
  --ph-font-mono: 'JetBrains Mono', 'JetBrains Mono Local', 'SF Mono', 'Cascadia Code', monospace;
  --ph-font-cjk: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;

  /* Spacing Scale (4px base: Apple-level breathing room) */
  --ph-space-3xs: 0.25rem;
  --ph-space-2xs: 0.5rem;
  --ph-space-xs: 0.75rem;
  --ph-space-sm: 1rem;
  --ph-space-md: 1.5rem;
  --ph-space-lg: 2.5rem;
  --ph-space-xl: 4rem;
  --ph-space-2xl: 6rem;
  --ph-space-3xl: 8rem;
  --ph-space-4xl: 10rem;

  /* Container Widths */
  --ph-container-wide: 1280px;
  --ph-container-default: 960px;
  --ph-container-narrow: 720px;
  --ph-container-tight: 560px;

  /* Header Chrome: top bar + fixed header. --ph-chrome-h clears BOTH
     from the viewport top (scroll anchors); first sections sit in flow
     BELOW the top bar, so they clear only the fixed header height:
     --ph-header-h = chrome minus top bar (68px desktop, 58px ≤479).
     Using full --ph-chrome-h there double-counts the top bar.
     Desktop top bar = 10px top padding + content + 10px bottom padding
     (both paddings live in .top-bar-inner), hence 46px total. */
  --ph-topbar-h: 46px;
  --ph-chrome-h: 114px;
  --ph-header-h: calc(var(--ph-chrome-h) - var(--ph-topbar-h));

  /* Grid */
  --ph-grid-gap-desktop: 2rem;
  --ph-grid-gap-mobile: 1.25rem;

  /* Typography Scale */
  --ph-text-hero: 600 clamp(2.5rem, 6vw, 4.5rem)/1.05 var(--ph-font-display);
  --ph-text-h1: 600 clamp(2rem, 4.5vw, 3.25rem)/1.1 var(--ph-font-display);
  --ph-text-h2: 600 clamp(1.625rem, 3.5vw, 2.25rem)/1.15 var(--ph-font-display);
  --ph-text-h3: 600 1.5rem/1.25 var(--ph-font-display);
  --ph-text-h4: 600 1.125rem/1.35 var(--ph-font-body);
  --ph-text-body-lg: 400 clamp(1rem, 1.5vw, 1.125rem)/1.7 var(--ph-font-body);
  --ph-text-body: 400 1rem/1.7 var(--ph-font-body);
  --ph-text-body-sm: 400 0.875rem/1.65 var(--ph-font-body);
  --ph-text-caption: 400 0.8125rem/1.5 var(--ph-font-body);
  --ph-text-overline: 600 0.6875rem/1.4 var(--ph-font-body);
  --ph-text-button: 600 0.9375rem/1 var(--ph-font-body);
  --ph-text-button-sm: 600 0.8125rem/1 var(--ph-font-body);
  --ph-text-mono-value: 600 clamp(1.75rem, 4vw, 2.5rem)/1 var(--ph-font-mono);
  --ph-text-mono-label: 500 0.75rem/1 var(--ph-font-mono);

  /* Tracking: premium, tighter display tracking */
  --ph-tracking-tight: -0.03em;
  --ph-tracking-normal: -0.01em;
  --ph-tracking-wide: 0.06em;

  /* Border Radius: consistent 12px/16px system */
  --ph-radius-sm: 0.5rem;
  --ph-radius-md: 0.75rem;
  --ph-radius-lg: 1rem;
  --ph-radius-xl: 1.25rem;
  --ph-radius-2xl: 1.75rem;
  --ph-radius-full: 9999px;

  /* Border Widths */
  --ph-border-width-thin: 1px;
  --ph-border-width-medium: 1.5px;
  --ph-border-width-thick: 2px;

  /* Duration Tokens (spring-physics calibrated) */
  --ph-duration-instant: 80ms;
  --ph-duration-fast: 200ms;
  --ph-duration-normal: 350ms;
  --ph-duration-slow: 600ms;
  --ph-duration-entrance: 800ms;

  /* Easing */
  --ph-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ph-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ph-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ph-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-Index Scale */
  --ph-z-base: 1;
  --ph-z-sticky: 10;
  --ph-z-nav: 50;
  --ph-z-overlay: 80;
  --ph-z-modal: 100;
  --ph-z-tooltip: 110;

  /* Icon Sizes */
  --ph-icon-sm: 1rem;
  --ph-icon-md: 1.25rem;
  --ph-icon-lg: 1.5rem;
  --ph-icon-xl: 2rem;
  --ph-icon-2xl: 2.5rem;

  /* ═══════════ DARK THEME (Brand Default) ═══════════ */
  /* Brand: Logo green (#228f22) + professional navy */
  --ph-accent: #1d8b2c;
  --ph-accent-hover: #25a838;
  --ph-accent-dark: #167a24;
  --ph-accent-subtle: rgba(29, 139, 44, 0.07);
  --ph-accent-glow: rgba(29, 139, 44, 0.10);
  --ph-accent-warm: #C4A040;
  --ph-accent-warm-subtle: rgba(196, 160, 64, 0.06);
  --ph-accent-warm-glow: rgba(196, 160, 64, 0.08);

  /* Backgrounds: brand navy with professional depth */
  --ph-bg-primary: #0b1929;
  --ph-bg-secondary: #101f33;
  --ph-bg-tertiary: #152540;
  --ph-bg-footer: #020d17;
  --ph-section-alt-bg: #132538;

  /* Surfaces: layered depth progression */
  --ph-surface-primary: #152540;
  --ph-surface-secondary: #1a2d52;
  --ph-surface-elevated: #203860;
  --ph-surface-overlay: rgba(11, 25, 41, 0.92);

  /* Text */
  --ph-text-primary: #EDF1F7;
  --ph-text-secondary: #94A6BE;
  --ph-text-muted: #7E94AE;
  --ph-text-accent: #25a838;
  --ph-text-inverse: #FFFFFF; /* CTA bands + accent buttons: white text on navy/green in BOTH themes */
  --ph-text-on-accent: #FFFFFF;

  /* Borders */
  --ph-border-default: rgba(148, 166, 190, 0.08);
  --ph-border-hover: rgba(148, 166, 190, 0.16);
  --ph-border-active: rgba(29, 139, 44, 0.35);
  --ph-border-subtle: rgba(148, 166, 190, 0.04);
  --ph-divider: rgba(148, 166, 190, 0.06);

  /* Shadows */
  --ph-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.5);
  --ph-shadow-2: 0 4px 20px rgba(0, 0, 0, 0.55);
  --ph-shadow-3: 0 12px 40px rgba(0, 0, 0, 0.6);
  --ph-shadow-4: 0 24px 64px rgba(0, 0, 0, 0.65);
  --ph-shadow-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --ph-shadow-glow: 0 0 60px rgba(29, 139, 44, 0.05);

  /* Semantic */
  --ph-success: #10C68D;
  --ph-success-subtle: rgba(16, 198, 141, 0.08);
  --ph-warning: #F0A828;
  --ph-warning-subtle: rgba(240, 168, 40, 0.08);
  --ph-danger: #F04350;
  --ph-danger-subtle: rgba(240, 67, 80, 0.08);
  --ph-info: #3B82F6;
  --ph-info-subtle: rgba(59, 130, 246, 0.08);

  /* State */
  --ph-opacity-disabled: 0.45;
  --ph-opacity-muted: 0.65;

  /* Focus Ring */
  --ph-focus-ring: 0 0 0 2px var(--ph-bg-primary), 0 0 0 4px var(--ph-accent);

  /* Dashboard Panel */
  --ph-dashboard-bg: #0d1f35;
  --ph-dashboard-grid: rgba(29, 139, 44, 0.03);
  --ph-dashboard-border: rgba(29, 139, 44, 0.08);
  --ph-gauge-track: rgba(148, 166, 190, 0.08);
  --ph-gauge-fill: #1d8b2c;
  --ph-gauge-warning: #F0A828;
  --ph-gauge-danger: #F04350;
  --ph-gauge-success: #10C68D;
  --ph-led-glow: rgba(16, 198, 141, 0.45);

  /* Product Glow: brand green radial, supporting product photography */
  --ph-product-glow: radial-gradient(ellipse 55% 55% at 50% 50%, rgba(29, 139, 44, 0.08) 0%, rgba(196, 160, 64, 0.03) 35%, transparent 70%);

  /* Ken Burns */
  --ph-kenburns-scale: 1.06;
  --ph-kenburns-duration: 10s;

  /* Comparison Section: Traditional (muted grayscale, always subdued) */
  --ph-comparison-traditional-bg-start: #1A1A1E;
  --ph-comparison-traditional-bg-end: #252528;
  /* Phone Frame (device chrome, always dark) */
  --ph-phone-frame-bg-start: #1e293b;
  --ph-phone-frame-bg-end: #0f172a;
  --ph-phone-screen-bg-start: #152540;
  --ph-phone-screen-bg-end: #0b1929;
  /* Project Overlay (always dark overlay on images) */
  --ph-project-overlay-bg: rgba(11, 25, 41, 0.65);
  --ph-project-overlay-text: #FFFFFF;
  --ph-project-overlay-text-secondary: rgba(255, 255, 255, 0.75);

  scrollbar-color: var(--ph-border-default) transparent;
  scrollbar-width: thin;
}

/* ═══════════ LIGHT THEME: Light Industrial / Premium Enterprise ═══════════ */
/* Brand: navy #08335A · green #1D8B2C · white surfaces · cool-toned depth */
[data-theme="light"] {
  color-scheme: light;

  /* ── Brand Accent: Phượng Hoàng green ── */
  --ph-accent: #1D8B2C;
  --ph-accent-hover: #167a24;
  --ph-accent-dark: #0f5e1c;
  --ph-accent-subtle: rgba(29, 139, 44, 0.06);
  --ph-accent-glow: rgba(29, 139, 44, 0.06);
  --ph-accent-warm: #B89430;
  --ph-accent-warm-subtle: rgba(184, 148, 48, 0.05);
  --ph-accent-warm-glow: rgba(184, 148, 48, 0.06);

  /* ── Backgrounds: clean white with cool-blue undertones (not SaaS grey) ── */
  --ph-bg-primary: #FFFFFF;
  --ph-bg-secondary: #EEF1F6;
  --ph-bg-tertiary: #E4E8F0;
  --ph-bg-footer: #020d17; /* Navy closing band: footer + CTA sections always dark in both themes (matches .footer hardcode) */
  --ph-section-alt-bg: #F3F7F3;

  /* ── Surfaces: white cards with subtle layering ── */
  --ph-surface-primary: #FFFFFF;
  --ph-surface-secondary: #F0F3F8;
  --ph-surface-elevated: #E8ECF4;
  --ph-surface-overlay: rgba(255, 255, 255, 0.95);

  /* ── Text: navy hierarchy with strong WCAG AA contrast ── */
  --ph-text-primary: #041C32;      /* deep navy: headings · 17.5:1 on white (AAA) */
  --ph-text-secondary: #2C4B6E;    /* navy-blue: body · 9.8:1 on white (AAA) */
  --ph-text-muted: #5B7191;        /* slate: captions · 5.7:1 on white (AA) */
  --ph-text-accent: #1D8B2C;       /* brand green on light */
  --ph-text-inverse: #FFFFFF;
  --ph-text-on-accent: #FFFFFF;

  /* ── Borders: navy-based, subtle, never harsh ── */
  --ph-border-default: rgba(8, 51, 90, 0.08);
  --ph-border-hover: rgba(8, 51, 90, 0.16);
  --ph-border-active: rgba(29, 139, 44, 0.42);
  --ph-border-subtle: rgba(8, 51, 90, 0.04);
  --ph-divider: rgba(8, 51, 90, 0.06);

  /* ── Shadows: delicate depth, no heavy dark glow ── */
  --ph-shadow-1: 0 1px 2px rgba(8, 51, 90, 0.04);
  --ph-shadow-2: 0 4px 16px rgba(8, 51, 90, 0.06);
  --ph-shadow-3: 0 12px 32px rgba(8, 51, 90, 0.08);
  --ph-shadow-4: 0 20px 60px rgba(8, 51, 90, 0.10);
  --ph-shadow-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --ph-shadow-glow: 0 0 40px rgba(29, 139, 44, 0.06);

  /* ── Semantic: keep functional colors distinct ── */
  --ph-success: #059669;
  --ph-success-subtle: rgba(5, 150, 105, 0.07);
  --ph-warning: #D97706;
  --ph-warning-subtle: rgba(217, 119, 6, 0.07);
  --ph-danger: #DC2626;
  --ph-danger-subtle: rgba(220, 38, 38, 0.07);
  --ph-info: #2563EB;
  --ph-info-subtle: rgba(37, 99, 235, 0.07);

  /* State */
  --ph-opacity-disabled: 0.45;
  --ph-opacity-muted: 0.65;

  --ph-focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--ph-accent);

  /* ── Dashboard / Gauge: light industrial panels ── */
  --ph-dashboard-bg: #F0F3F7;
  --ph-dashboard-grid: rgba(8, 51, 90, 0.04);
  --ph-dashboard-border: rgba(8, 51, 90, 0.08);
  --ph-gauge-track: rgba(8, 51, 90, 0.08);
  --ph-gauge-fill: #1D8B2C;
  --ph-gauge-warning: #D97706;
  --ph-gauge-danger: #DC2626;
  --ph-gauge-success: #059669;
  --ph-led-glow: rgba(5, 150, 105, 0.4);
  --ph-product-glow: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(29, 139, 44, 0.04) 0%, transparent 70%);

  /* ── Comparison section: traditional column stays muted ── */
  --ph-comparison-traditional-bg-start: #E5E7EB;
  --ph-comparison-traditional-bg-end: #D1D5DB;

  scrollbar-color: rgba(8, 51, 90, 0.15) transparent;
}

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

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--ph-chrome-h) + 16px);
  overflow-x: clip;
}

body {
  font: var(--ph-text-body);
  color: var(--ph-text-primary);
  background: var(--ph-bg-primary);
  min-height: 100dvh;
  letter-spacing: var(--ph-tracking-normal);
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }

a {
  color: var(--ph-accent);
  text-decoration: none;
  transition: color var(--ph-duration-fast) var(--ph-ease-out);
}
a:hover { color: var(--ph-accent-hover); }

ul, ol { list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; border: none; background: none; outline: none; }
button { cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
  font: inherit;
  color: inherit;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* Keep long translated labels, specifications and contact details inside
   their columns without changing the underlying copy. */
:where(p, li, dd, dt, td, th, label) { overflow-wrap: break-word; }

/* ═══════════ FOCUS ═══════════ */
:focus-visible { outline: none; box-shadow: var(--ph-focus-ring); border-radius: 2px; }
:focus:not(:focus-visible) { box-shadow: none; }

/* ═══════════ SELECTION ═══════════ */
::selection { background: var(--ph-accent); color: var(--ph-text-on-accent); }

/* ═══════════ REDUCED MOTION ═══════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .animate-on-scroll { opacity: 1 !important; transform: none !important; }
}

/* ═══════════ SKIP LINK ═══════════ */
.skip-link {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translate(-50%, -160%);
  z-index: var(--ph-z-tooltip);
  padding: 10px 24px;
  background: var(--ph-accent);
  color: var(--ph-text-on-accent);
  font: var(--ph-text-button);
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: var(--ph-radius-sm);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  transition: transform var(--ph-duration-fast) var(--ph-ease-out);
  outline: none;
}

.skip-link:focus {
  transform: translate(-50%, 0);
  outline: 3px solid var(--ph-text-on-accent);
  outline-offset: 2px;
}

.skip-link:not(:focus) {
  pointer-events: none;
}

/* Skip-link target offset to clear chrome (top bar + fixed header) */
#main-content {
  scroll-margin-top: calc(var(--ph-chrome-h) + 16px);
}

@media (max-width: 479px) {
  #main-content { scroll-margin-top: calc(var(--ph-chrome-h) + 16px); }
}

/* ═══════════ UTILITY CONTAINERS ═══════════ */
.container-wide  { max-width: var(--ph-container-wide); margin: 0 auto; padding: 0 var(--ph-space-md); }
.container-default { max-width: var(--ph-container-default); margin: 0 auto; padding: 0 var(--ph-space-md); }
.container-narrow { max-width: var(--ph-container-narrow); margin: 0 auto; padding: 0 var(--ph-space-md); }
.container-tight  { max-width: var(--ph-container-tight); margin: 0 auto; padding: 0 var(--ph-space-md); }

@media (max-width: 767px) {
  .container-wide, .container-default, .container-narrow, .container-tight {
    padding: 0 var(--ph-space-sm);
  }
}

/* Tablet and below: the ≤767 reset in navbar.css removes the top/bottom
   padding of .top-bar-inner, so the bar keeps its pre-padding 36px
   (content stays vertically centered, exactly as before). */
@media (max-width: 767px) {
  :root {
    --ph-topbar-h: 36px;
    --ph-chrome-h: 104px;
  }
}

/* Mobile chrome: top bar 32px + header 58px */
@media (max-width: 479px) {
  :root {
    --ph-topbar-h: 32px;
    --ph-chrome-h: 90px;
  }
}

/* ═══════════ SCREEN READER ONLY ═══════════ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════ SCROLL REVEAL (IntersectionObserver-driven) ═══════════ */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--ph-duration-entrance) var(--ph-ease-out),
              transform var(--ph-duration-entrance) var(--ph-ease-out);
}
.animate-on-scroll.visible { opacity: 1; transform: translateY(0); }

.stagger-children > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.5s var(--ph-ease-out), transform 0.5s var(--ph-ease-out);
}
.stagger-children.visible > *:nth-child(1)  { transition-delay: 0ms; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(2)  { transition-delay: 80ms; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(3)  { transition-delay: 160ms; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(4)  { transition-delay: 240ms; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(5)  { transition-delay: 320ms; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(6)  { transition-delay: 400ms; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(7)  { transition-delay: 480ms; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(8)  { transition-delay: 560ms; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(9)  { transition-delay: 640ms; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(10) { transition-delay: 720ms; opacity: 1; transform: translateY(0); }

/* ═══════════ KEYFRAMES ═══════════ */
@keyframes ph-fade-up  { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ph-float    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ph-pulse    { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }