/* ============================================================
   E2 Software Factory — Design System
   Based on DESIGN.md: "The Kinetic Architect"
   ============================================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

/* --- Component Imports --- */
@import 'components/navigation.css';
@import 'components/hero.css';
@import 'components/problem.css';
@import 'components/services.css';
@import 'components/methodology.css';
@import 'components/contact.css';
@import 'components/ui.css';

/* ============================================================
   1. CSS Custom Properties (Design Tokens)
   ============================================================ */
:root {
  /* --- Surface Hierarchy (No-Line Rule) --- */
  --surface:                 #f8f9fa; /* Base Layer – The canvas */
  --surface-container-low:   #f3f4f5; /* Secondary Tier – Sidebars, utility */
  --surface-container:       #edeeef;
  --surface-container-high:  #e7e8e9;
  --surface-container-highest:#e1e3e4;
  --surface-container-lowest:#ffffff; /* Action Tier – Focal cards */
  --surface-dim:             #d9dadb;
  --surface-bright:          #f8f9fa;
  --surface-variant:         #e1e3e4; /* Blue-tinted neutral (never plain gray) */

  /* --- Core Brand --- */
  --primary:                 #000000;
  --primary-container:       #001c3b; /* Deep-space blue */
  --on-primary:              #ffffff;
  --on-primary-container:    #6e85aa;
  --on-primary-fixed:        #001c3b;
  --on-primary-fixed-variant:#30486a;
  --primary-fixed:           #d5e3ff;
  --primary-fixed-dim:       #b0c8f0;
  --inverse-primary:         #b0c8f0;

  /* --- Secondary --- */
  --secondary:               #396093;
  --on-secondary:            #ffffff;
  --secondary-container:     #a0c6ff;
  --on-secondary-container:  #2a5284;
  --secondary-fixed:         #d4e3ff;
  --secondary-fixed-dim:     #a5c8ff;

  /* --- Tertiary / Electric Cyan Accent --- */
  --tertiary:                #000000;
  --tertiary-container:      #002021;
  --on-tertiary:             #ffffff;
  --on-tertiary-container:   #009299;
  --tertiary-fixed:          #63f7ff; /* ★ ELECTRIC CYAN – Signature Glow */
  --tertiary-fixed-dim:      #00dce5;
  --on-tertiary-fixed:       #002021;
  --on-tertiary-fixed-variant:#004f53;

  /* --- Semantic --- */
  --error:                   #ba1a1a;
  --error-container:         #ffdad6;
  --on-error:                #ffffff;
  --on-error-container:      #93000a;
  --on-background:           #191c1d;
  --on-surface:              #191c1d;
  --on-surface-variant:      #44474c; /* Body text color – never pure black */
  --outline:                 #74777c;
  --outline-variant:         #c4c6cc; /* Ghost borders at 15% opacity */
  --inverse-surface:         #2e3132;
  --inverse-on-surface:      #f0f1f2;
  --surface-tint:            #485f83;

  /* --- Typography --- */
  --font-headline:           'Space Grotesk', sans-serif; /* Industrial voice */
  --font-body:               'Inter', sans-serif;         /* Operational voice */

  /* --- Type Scale --- */
  --display-lg:   3.5rem;   /* Hero moments, tight letter-spacing */
  --display-md:   2.8rem;
  --headline-lg:  2rem;
  --headline-md:  1.75rem;
  --title-lg:     1.375rem;
  --title-md:     1rem;
  --body-lg:      1rem;
  --body-md:      0.875rem;
  --body-sm:      0.8125rem;
  --label-lg:     0.875rem;
  --label-md:     0.75rem;
  --label-sm:     0.6875rem; /* Tiny uppercase labels, +10% tracking */

  /* --- 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:  1.75rem;  /* Card header/body gap */
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 5.5rem;  /* Major section gap */

  /* --- Border Radius (Engineered, not rounded) --- */
  --radius-sm:  0.125rem;
  --radius-md:  0.375rem;
  --radius-lg:  0.25rem;
  --radius-xl:  0.5rem;

  /* --- Elevation (Tonal Layering, not shadows) --- */
  --shadow-ambient: 0px 24px 48px rgba(0, 28, 59, 0.08); /* Blue-tinted ambient */
  --shadow-glow:    0 0 20px rgba(99, 247, 255, 0.15);    /* Electric cyan glow */
  --shadow-input:   0 4px 8px rgba(99, 247, 255, 0.12);   /* Input focus glow */

  /* --- Transitions --- */
  --ease-kinetic: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 200ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
}


/* ============================================================
   2. CSS Reset & Base
   ============================================================ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body {
  font-family: var(--font-body);
  font-size: var(--body-md);
  color: var(--on-surface);
  background-color: var(--surface);
  line-height: 1.6;
  min-height: 100dvh;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--duration-fast) var(--ease-kinetic);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline);
  line-height: 1.15;
  color: var(--primary);
}

/* --- Material Symbols --- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  user-select: none;
}

.material-symbols-outlined.filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* --- Utility Classes --- */
.container {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.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;
}

/* Label utility – "Architectural Blueprint" look */
.label-upper {
  font-family: var(--font-body);
  font-size: var(--label-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}