/* -- 0. Custom Font Imports -- */
@font-face {
 font-family: 'Aspekta';
 src: url('https://cdn.jsdelivr.net/gh/ivodolenc/aspekta@master/fonts/AspektaVF.woff2') format('woff2');
 font-weight: 100 1000;
 font-style: normal;
 font-display: swap;
}

@font-face {
 font-family: 'Hind Siliguri';
 src: url('/fonts/HindSiliguri-Regular.ttf') format('truetype');
 font-weight: 400;
 font-style: normal;
 font-display: swap;
}

@font-face {
 font-family: 'Hind Siliguri';
 src: url('/fonts/HindSiliguri-Light.ttf') format('truetype');
 font-weight: 300;
 font-style: normal;
 font-display: swap;
}

@font-face {
 font-family: 'Hind Siliguri';
 src: url('/fonts/HindSiliguri-Medium.ttf') format('truetype');
 font-weight: 500;
 font-style: normal;
 font-display: swap;
}

@font-face {
 font-family: 'Hind Siliguri';
 src: url('/fonts/HindSiliguri-SemiBold.ttf') format('truetype');
 font-weight: 600;
 font-style: normal;
 font-display: swap;
}

@font-face {
 font-family: 'Hind Siliguri';
 src: url('/fonts/HindSiliguri-Bold.ttf') format('truetype');
 font-weight: 700;
 font-style: normal;
 font-display: swap;
}

/* -- 1. Google Fonts -- */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Hind+Siliguri:wght@300;400;500;600;700&family=Inter:wght@400;500;600&display=swap');

/* -- 2. Primitive palette -- */
:root {
 /* Ezipack Official Palette (Hind Siliguri / Industrial Blue & Amber) */
 --ez-blue-900: #042C53; /* Deep Navy */
 --ez-blue-800: #185FA5; /* Primary Blue */
 --ez-blue-700: #104C88; /* Primary Blue Hover */
 --ez-blue-600: #1C6BB8;
 --ez-blue-500: #267BCB; /* Dark Mode Brand Blue */
 --ez-blue-100: #E6F1FB; /* Light Blue secondary bg */
 --ez-blue-050: #F0F7FD;

 /* Amber Accent */
 --ez-amber-700: #B2700E;
 --ez-amber-600: #D08719;
 --ez-amber-500: #EF9F27; /* Amber Accent */
 --ez-amber-400: #F2B252;
 --ez-amber-100: #FDF1DD;

 /* Charcoal Primary Text */
 --ez-charcoal: #2C2C2A;

 /* Neutral */
 --ez-neutral-950: #0b0f19; /* Rocket dark bg */
 --ez-neutral-900: #111827; /* Rocket dark surface */
 --ez-neutral-800: #1f2937; /* Rocket dark border */
 --ez-neutral-700: #374151;
 --ez-neutral-600: #4B5563;
 --ez-neutral-400: #9CA3AF;
 --ez-neutral-300: #D1D5DB;
 --ez-neutral-200: #E5E7EB;
 --ez-neutral-100: #F3F4F6;
 --ez-neutral-050: #F9FAFB;

 /* Typography */
 --font-body: 'Hind Siliguri', system-ui, sans-serif;
 --font-display: 'Hind Siliguri', system-ui, sans-serif; /* Brand guideline: all headlines use Hind Siliguri */
 --font-geist: 'Geist', sans-serif; /* UI/buttons/specs per brand guidelines */
 --font-mono: 'Courier New', Courier, monospace;

 /* Type scale */
 --text-xs: 0.75rem;
 --text-sm: 0.875rem;
 --text-base: 1rem;
 --text-lg: 1.125rem;
 --text-xl: 1.25rem;
 --text-2xl: 1.5rem;
 --text-3xl: 1.875rem;
 --text-4xl: 2.25rem;
 --text-5xl: 3rem;

 /* Spacing (8px grid) */
 --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;

 /* Layout */
 --max-width: 1280px;
 --border-width: 1px;
 --radius: 8px; /* Rocket-style 8px radius */

 /* Header height - used for scroll-padding */
 --header-height: clamp(64px, 5.6vw, 100px);

 /* -- Design system tokens (DESIGN.md aligned) -- */

 /* Display-xxl: hero headline */
 --type-display-xxl-size: 80px;
 --type-display-xxl-weight: 600;
 --type-display-xxl-leading: 83.2px;
 --type-display-xxl-tracking: -0.8px;

 /* Eyebrow uppercase */
 --type-eyebrow-size: 15px;
 --type-eyebrow-weight: 500;
 --type-eyebrow-leading: 19.5px;
 --type-eyebrow-tracking: 1.5px;

 /* Eyebrow-sm: badge / label size */
 --type-eyebrow-sm-size: 12px;
 --type-eyebrow-sm-weight: 500;
 --type-eyebrow-sm-leading: 15px;
 --type-eyebrow-sm-tracking: 0.6px;

 /* Body-lg: lead paragraph */
 --type-body-lg-size: 28.8px;
 --type-body-lg-weight: 400;
 --type-body-lg-leading: 46.08px;
 --type-body-lg-tracking: -0.288px;

 /* Radius scale (Rocket-style) */
 --radius-btn: 8px; /* Rocket 8px button radius */
 --radius-card: 8px; /* Rocket 8px card radius */

 /* CTA button geometry */
 --button-cut: 15px;

 /* Hairline border */
 --color-hairline: #e5e7eb;

 /* Deep Navy - primary ink / CTA */
 --color-primary: #042C53;
 --color-primary-hover: #185FA5;
}

/* -- 3. Light theme (default) -- */
:root,
[data-theme="light"] {
 --color-bg: #F6F6F3; /* Talio warm white page background */
 --color-surface: #ffffff;
 --color-surface-alt: #f3f4f6;
 --color-border: #e5e7eb; /* Rocket border line color */
 --color-border-strong: #d1d5db;

 --color-text: var(--ez-blue-900);
 --color-text-secondary: var(--ez-blue-800);
 --color-text-muted: var(--ez-neutral-400);
 --color-text-inverse: #FFFFFF;

 --color-brand: var(--ez-blue-800);
 --color-brand-hover: var(--ez-blue-700);
 --color-brand-subtle: var(--ez-blue-050);
 --color-on-brand: #FFFFFF;

 --color-accent: var(--ez-amber-500);
 --color-accent-hover: var(--ez-amber-600);
 --color-on-accent: var(--ez-blue-900);

 /* SVG grid for blueprint sections */
 --color-grid-stroke: %23185FA5;
 --color-grid-opacity: 0.07;
}

/* -- 4. Dark theme -- */
[data-theme="dark"] {
 --color-bg: var(--ez-neutral-950);
 --color-surface: var(--ez-neutral-900);
 --color-surface-alt: var(--ez-neutral-800);
 --color-border: var(--ez-neutral-800);
 --color-border-strong: var(--ez-neutral-700);

 --color-text: var(--ez-neutral-100);
 --color-text-secondary: var(--ez-neutral-400);
 --color-text-muted: var(--ez-neutral-600);
 --color-text-inverse: var(--ez-blue-900);

 --color-brand: var(--ez-blue-500);
 --color-brand-hover: var(--ez-blue-600);
 --color-brand-subtle: rgba(43, 106, 196, 0.14);
 --color-on-brand: #FFFFFF;

 --color-accent: var(--ez-amber-500);
 --color-accent-hover: var(--ez-amber-400);
 --color-on-accent: var(--ez-blue-900);

 --color-grid-stroke: %23FFFFFF;
 --color-grid-opacity: 0.05;
}

/* -- 5. Theme transition - only active during toggle -- */
.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
 transition:
 background-color 220ms ease,
 border-color 220ms ease,
 color 220ms ease,
 fill 220ms ease,
 stroke 220ms ease !important;
}

/* -- 6. Reset -- */
*, *::before, *::after {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

html {
 font-size: 16px;
 scroll-behavior: smooth;
 scroll-padding-top: var(--header-height);
 -webkit-text-size-adjust: 100%;
 text-size-adjust: 100%;
}

body {
 font-family: var(--font-body);
 font-size: var(--text-base);
 line-height: 1.65;
 color: var(--color-text);
 background-color: var(--color-bg);
 min-height: 100vh;
}

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

a {
 color: var(--color-brand);
 text-decoration: none;
}

a:hover {
 text-decoration: underline;
}

ul, ol {
 list-style: none;
}

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

button {
 cursor: pointer;
}

/* -- 7. Typography -- */
h1, h2, h3, h4, h5, h6 {
 font-family: var(--font-display);
 font-weight: 700;
 line-height: 1.2;
 color: var(--color-text);
}

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

@media (max-width: 768px) {
 h1 { font-size: var(--text-3xl); }
 h2 { font-size: var(--text-2xl); }
 h3 { font-size: var(--text-xl); }
}

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

p:last-child {
 margin-bottom: 0;
}

strong {
 font-weight: 700;
 color: var(--color-text);
}

/* -- 8. Layout utilities -- */
.container {
 width: 100%;
 max-width: var(--max-width);
 margin-inline: auto;
 padding-inline: var(--space-6);
}

@media (max-width: 640px) {
 .container {
 padding-inline: var(--space-4);
 }
}

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

/* -- 9. Focus & accessibility -- */
:focus-visible {
 outline: 2px solid var(--color-accent);
 outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after {
 animation-duration: 0.01ms !important;
 transition-duration: 0.01ms !important;
 scroll-behavior: auto !important;
 }
}