/* ============================================
   NAMSEZANA TRADING & PROJECTS
   Base CSS - Variables, Reset & Utilities
   ============================================ */

/* CSS Custom Properties */
:root {
  /* 
   * DYNAMIC COLOR SYSTEM (60-30-10 Theory) 
   * Single source of truth for color usage and contrast rules.
   */

  /* Base Palette (RGB components for rgba() usage) */
  --palette-white-rgb: 248, 249, 250;
  /* #f8f9fa */
  --palette-blue-deep-rgb: 26, 58, 92;
  /* #1a3a5c */
  --palette-blue-base-rgb: 26, 58, 92;
  /* #1a3a5c */
  --palette-yellow-rgb: 255, 193, 7;
  /* #ffc107 */
  --palette-dark-rgb: var(--color-secondary-rgb);
  /* No more 1a1a1a */
  --palette-red-rgb: 220, 53, 69;
  /* #dc3545 */
  --palette-green-rgb: 40, 167, 69;
  /* #28a745 */

  /* 
   * 60% DOMINANT (Backgrounds, primary space) 
   */
  --color-dominant-rgb: var(--palette-white-rgb);
  --color-dominant: rgb(var(--color-dominant-rgb));
  --color-dominant-dark-rgb: var(--palette-blue-deep-rgb);
  --color-dominant-dark: rgb(var(--color-dominant-dark-rgb));

  /* 
   * 30% SECONDARY (Cards, structural elements, secondary sections) 
   */
  --color-secondary-rgb: var(--palette-blue-base-rgb);
  --color-secondary: rgb(var(--color-secondary-rgb));
  --color-secondary-light-rgb: 35, 75, 115;
  /* #234b73 */
  --color-secondary-light: rgb(var(--color-secondary-light-rgb));

  /* 
   * 10% ACCENT (CTAs, Highlights, Icons) 
   */
  --color-accent-rgb: var(--palette-yellow-rgb);
  --color-accent: rgb(var(--color-accent-rgb));

  /* System Mappings / Legacy Support */
  --primary-blue: var(--color-secondary);
  --primary-blue-light: var(--color-secondary-light);
  --primary-blue-dark: var(--color-dominant-dark);
  --safety-yellow: var(--color-accent);
  --safety-yellow-light: #ffd54f;
  --safety-yellow-dark: #ff8f00;
  --operational-white: var(--color-dominant);
  --operational-white-dark: var(--color-dominant);
  --industrial-dark: var(--color-secondary);
  --industrial-darker: var(--color-secondary);
  --alert-red: rgb(var(--palette-red-rgb));
  --alert-red-light: #e4606d;
  --success-green: rgb(var(--palette-green-rgb));

  /* Neutral Scale — brand-tinted grays for cohesion (OKLCH chroma 0.01, hue 250) */
  --gray-100: oklch(97% 0.005 250);
  /* near-white with blue tint */
  --gray-200: oklch(93% 0.008 250);
  --gray-300: oklch(87% 0.01 250);
  --gray-400: oklch(78% 0.01 250);
  --gray-500: oklch(65% 0.01 250);
  --gray-600: oklch(53% 0.01 250);
  --gray-700: oklch(42% 0.01 250);
  --gray-800: oklch(28% 0.01 250);
  --gray-900: oklch(16% 0.01 250);

  /* Typography Scale */
  --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-secondary: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Fluid Typography */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.65vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-3xl: clamp(1.875rem, 1.6rem + 1.4vw, 2.5rem);
  --text-4xl: clamp(2.25rem, 1.9rem + 1.75vw, 3.5rem);
  --text-5xl: clamp(3rem, 2.5rem + 2.5vw, 5rem);
  --text-6xl: clamp(3.75rem, 3rem + 3.75vw, 6rem);

  /* Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;
  --space-48: 12rem;

  /* Layout */
  --container-max: 1400px;
  --container-narrow: 1000px;
  --section-padding-y: clamp(3.5rem, 5.5vw, 6rem);
  --section-padding-x: clamp(1rem, 3.5vw, 3rem);

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-glow: 0 0 20px rgba(26, 58, 92, 0.3);
  --shadow-glow-yellow: 0 0 20px rgba(255, 193, 7, 0.4);

  /* Transitions */
  --transition-micro: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slower: 800ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-Index Scale (Restored) */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-webgl: -1;

  /* Layout Constants (Mathematical Balance) */
  --navbar-height: 80px;
  --navbar-height-actual: var(--navbar-height);

  /* Sensory Textures & Atmospheric Layers */
  --texture-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  --texture-grid: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='0.5' fill='%231a3a5c' fill-opacity='0.05'/%3E%3C/svg%3E");
}

@keyframes atmospheric-drift {
  0% {
    background-position: 0% 0%;
  }

  100% {
    background-position: 100% 100%;
  }
}

/* Reset & Base Styles */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--gray-800);
  background-color: var(--operational-white);
  overflow-x: hidden;
  --bg-tint: color-mix(in oklch, var(--primary-blue), transparent 97%);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-color: var(--bg-tint);
  background-image:
    radial-gradient(circle at 50% 50%, rgba(var(--palette-blue-deep-rgb), 0.03) 0%, transparent 80%),
    var(--texture-grain);
  opacity: 0.2;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: -2;
  animation: atmospheric-drift 60s linear infinite;
}

main {
  position: relative;
  background-image: var(--texture-grid);
  background-attachment: fixed;
}

/* Atmospheric Section Divider */
.section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--palette-blue-deep-rgb), 0.08), transparent);
}

.atmospheric-glow {
  position: absolute;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(var(--palette-blue-deep-rgb), 0.04) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

/* MISSION & VISION MODERNIZATION */
.mission-card,
.vision-card {
  background: var(--primary-blue);
  /* 30% Secondary Solid */
  border-radius: 0;
  padding: var(--space-12);
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  /* 30 Rule */
  position: relative;
  overflow: hidden;
  transition: all var(--transition-base);
}

.mission-card:hover,
.vision-card:hover {
  border-color: var(--safety-yellow);
  /* 10% Accent */
  box-shadow: 0 10px 30px rgba(26, 58, 92, 0.2);
}

.mission-card {
  background-image: radial-gradient(circle at top right, rgba(26, 58, 92, 0.02), transparent 70%);
}

.vision-card {
  background-image: radial-gradient(circle at top right, rgba(255, 193, 7, 0.02), transparent 70%);
}

.mission-card::before,
.vision-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
}

.mission-card::before {
  background: var(--operational-white);
  /* 60% Accent line */
}

.vision-card::before {
  background: var(--safety-yellow);
  /* 10% Accent */
}

.mv-icon {
  width: 48px;
  height: 48px;
  background: var(--operational-white);
  /* 60% neutral pop */
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-8);
}

.mv-icon svg {
  width: 20px;
  height: 20px;
  color: var(--primary-blue);
}

.vision-card .mv-icon {
  background: var(--safety-yellow);
  /* 10% highlight */
}

.vision-card .mv-icon svg {
  color: var(--industrial-darker);
}

.mv-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  /* White on deep blue: passes 4.5:1 — previously --gray-400 failed on colored backgrounds */
  color: rgba(248, 249, 250, 0.85);
  display: block;
  margin-bottom: var(--space-4);
}

.mission-card h3,
.vision-card h3 {
  font-family: var(--font-secondary);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  /* 90 Rule */
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* TEAM MODERNIZATION */
.team-card {
  background: var(--primary-blue);
  /* 30% Secondary Solid */
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all var(--transition-base);
  width: 200px;
}

.team-card:hover {
  transform: translateY(-4px);
  border-color: var(--safety-yellow);
  box-shadow: 0 10px 30px rgba(26, 58, 92, 0.2);
}

.team-photo {
  width: 100%;
  aspect-ratio: 1;
  background: var(--gray-50);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.team-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, rgba(26, 58, 92, 0.03));
}

.team-photo svg {
  width: 36px;
  height: 36px;
  color: var(--gray-200);
  z-index: 1;
}

.team-info {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.team-name {
  font-family: var(--font-secondary);
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  /* 90 Rule */
  margin-bottom: var(--space-1);
}

.team-role {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  /* Raised from 0.6 to 0.8 opacity to pass 4.5:1 contrast on blue background */
  color: rgba(248, 249, 250, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

/* SERVICES MODERNIZATION */
.service-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  padding: var(--space-10);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 0;
  background: var(--safety-yellow);
  transition: height var(--transition-slow);
}

.service-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-4px);
}

.service-card:hover::before {
  height: 100%;
}

.service-tier {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: 2px;
  margin-bottom: var(--space-6);
  letter-spacing: 0.12em;
}

/* REFERENCES MODERNIZATION */
.reference-card {
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  padding: var(--space-12);
  margin-top: var(--space-12);
  position: relative;
  overflow: hidden;
}

.reference-card::after {
  content: 'VERIFIED OPERATION';
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--success-green);
  letter-spacing: 0.25em;
  opacity: 0.6;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-12);
}

@media (min-width: 640px) {
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .values-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.values .pillar {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: white;
  padding: var(--space-10) var(--space-8);
  text-align: left;
  transition: all var(--transition-base);
  border-radius: 0;
}

.values .pillar-number {
  color: var(--safety-yellow);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  opacity: 0.5;
  display: block;
  margin-bottom: var(--space-6);
}

.values .pillar-title {
  color: white;
  font-family: var(--font-secondary);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: var(--space-3);
  letter-spacing: -0.01em;
}

.values .pillar-desc {
  /* Raised from 0.6 to 0.78 opacity — 0.6 on deep blue fails WCAG 4.5:1 for body text */
  color: rgba(248, 249, 250, 0.78);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.values .pillar:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--safety-yellow);
  transform: translateY(-4px);
}

.values .pillar:hover .pillar-number {
  opacity: 1;
}

.values .pillar.active {
  background: var(--safety-yellow);
  border-color: var(--safety-yellow);
}

.values .pillar.active .pillar-number {
  color: var(--industrial-darker);
  opacity: 0.7;
}

.values .pillar.active .pillar-title {
  color: var(--industrial-darker);
}

.values .pillar.active .pillar-desc {
  color: rgba(0, 0, 0, 0.7);
}

.overview-stats .stat-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--space-8) var(--space-6);
  text-align: left;
  position: relative;
  transition: all var(--transition-base);
}

.overview-stats .stat-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--safety-yellow);
}

.overview-stats .stat-card::after {
  content: '';
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 4px;
  height: 4px;
  background: var(--safety-yellow);
  border-radius: 50%;
  opacity: 0.5;
}

.overview-stats .stat-number {
  font-family: var(--font-secondary);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 800;
  color: var(--safety-yellow);
  line-height: 1;
}

.overview-stats .stat-label {
  font-size: 0.65rem;
  /* Raised from 0.5 to 0.82 to pass WCAG 4.5:1 — 0.5 opacity on blue fails for text */
  color: rgba(248, 249, 250, 0.82);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-top: var(--space-3);
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-secondary);
  font-weight: 700;
  line-height: 1.2;
  color: var(--industrial-dark);
}

h1 {
  font-size: var(--text-5xl);
}

h2 {
  font-size: var(--text-4xl);
}

h3 {
  font-size: var(--text-3xl);
}

h4 {
  font-size: var(--text-2xl);
}

h5 {
  font-size: var(--text-xl);
}

h6 {
  font-size: var(--text-lg);
}

p {
  margin-bottom: var(--space-4);
}

a {
  color: var(--primary-blue);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--primary-blue-light);
}

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

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul,
ol {
  list-style: none;
}

/* 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;
}

/* Skip Link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-3) var(--space-6);
  background: var(--primary-blue);
  color: white;
  font-weight: 600;
  border-radius: var(--radius-md);
  z-index: var(--z-tooltip);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-4);
}

/* Focus Styles */
:focus-visible {
  outline: 2px solid var(--safety-yellow);
  outline-offset: 2px;
}

/* Selection */
::selection {
  background: var(--primary-blue);
  color: white;
}

.overview .section-title {
  color: white;
  letter-spacing: -0.02em;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--gray-200);
}

::-webkit-scrollbar-thumb {
  background: var(--gray-400);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gray-500);
}

/* 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;
  }

  .webgl-canvas {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  :root {
    --navbar-height: 130px;
  }
}

/* Print Styles */
@media print {
  .no-print {
    display: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
  }
}