/* ===========================================
   INVICTOS BUSINESS — Design System: Institutional Brutalism
   main.css — Base tokens, reset, typography, utilities
   =========================================== */

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

/* ===========================================
   1. DESIGN TOKENS (CSS Custom Properties)
   =========================================== */
:root {
  /* --- Color Palette (Material Design 3 — Institutional Brutalism) --- */
  --color-primary:                 #000000;
  --color-on-primary:              #ffffff;
  --color-primary-container:       #161c28;
  --color-on-primary-container:    #7e8493;
  --color-primary-fixed:           #dde2f3;
  --color-primary-fixed-dim:       #c1c6d7;
  --color-on-primary-fixed:        #161c28;
  --color-on-primary-fixed-variant:#414754;
  --color-inverse-primary:         #c1c6d7;

  --color-secondary:               #ba0320;
  --color-on-secondary:            #ffffff;
  --color-secondary-container:     #df2a35;
  --color-on-secondary-container:  #fffbff;
  --color-secondary-fixed:         #ffdad7;
  --color-secondary-fixed-dim:     #ffb3af;
  --color-on-secondary-fixed:      #410005;
  --color-on-secondary-fixed-variant:#930016;

  --color-tertiary:                #745b00;
  --color-on-tertiary:             #ffffff;
  --color-tertiary-container:      #d1a600;
  --color-on-tertiary-container:   #4f3d00;
  --color-tertiary-fixed:          #ffe08c;
  --color-tertiary-fixed-dim:      #efc12a;
  --color-on-tertiary-fixed:       #241a00;
  --color-on-tertiary-fixed-variant:#584400;

  --color-error:                   #ba1a1a;
  --color-on-error:                #ffffff;
  --color-error-container:         #ffdad6;
  --color-on-error-container:      #93000a;

  --color-surface:                 #f7f9ff;
  --color-on-surface:              #161c22;
  --color-surface-variant:         #dde3eb;
  --color-on-surface-variant:      #45474c;
  --color-surface-dim:             #d4dbe2;
  --color-surface-bright:          #f7f9ff;
  --color-surface-tint:            #585e6d;

  /* Tonal Stacking — Surface Hierarchy */
  --color-surface-container-lowest:  #ffffff;
  --color-surface-container-low:     #eef4fc;
  --color-surface-container:         #e8eef6;
  --color-surface-container-high:    #e3e9f1;
  --color-surface-container-highest: #dde3eb;

  --color-inverse-surface:         #2b3137;
  --color-inverse-on-surface:      #ebf1f9;

  --color-outline:                 #76777c;
  --color-outline-variant:         #c6c6cc;

  --color-background:              #f7f9ff;
  --color-on-background:           #161c22;

  /* --- Slate (Navbar / Footer Dark) --- */
  --color-slate-950:               #020617;
  --color-slate-500:               #64748b;
  --color-slate-400:               #94a3b8;

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

  /* --- Spacing --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* --- Border Radius: 0px — Institutional Brutalism --- */
  --radius: 0px;

  /* --- Shadows (Ambient — transient only) --- */
  --shadow-ambient: 0px 20px 40px rgba(22, 28, 34, 0.06);

  /* --- Transitions --- */
  --transition-fast: 200ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
  --transition-hero: 700ms ease;
  --transition-long: 1000ms ease;
}

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

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

body {
  font-family: var(--font-body);
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  overflow-x: hidden;
  line-height: 1.6;
}

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

a {
  text-decoration: none;
  color: inherit;
}

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

/* ===========================================
   3. TYPOGRAPHY UTILITIES
   =========================================== */
.font-headline {
  font-family: var(--font-headline);
}

.font-body {
  font-family: var(--font-body);
}

.font-label {
  font-family: var(--font-label);
}

/* Display sizes */
.text-display-lg  { font-size: 3.5rem;  line-height: 1.0; overflow-wrap: break-word; }
.text-display-md  { font-size: 3rem;    line-height: 1.0; overflow-wrap: break-word; }
.text-display-sm  { font-size: 2.25rem; line-height: 1.1; overflow-wrap: break-word; }

/* Headline sizes */
.text-headline-lg { font-size: 2rem;    line-height: 1.2; overflow-wrap: break-word; }
.text-headline-md { font-size: 1.75rem; line-height: 1.3; overflow-wrap: break-word; }
.text-headline-sm { font-size: 1.5rem;  line-height: 1.3; overflow-wrap: break-word; }

/* Body sizes */
.text-body-lg     { font-size: 1.25rem; line-height: 1.6; }
.text-body-md     { font-size: 0.875rem; line-height: 1.5; }
.text-body-sm     { font-size: 0.75rem; line-height: 1.4; }

/* Label sizes */
.text-label-lg    { font-size: 0.875rem; }
.text-label-md    { font-size: 0.75rem;  }
.text-label-sm    { font-size: 0.625rem; }

/* Responsive Typography Adjustments */
@media (max-width: 768px) {
  .text-display-lg  { font-size: 2.5rem; }
  .text-display-md  { font-size: 2rem; }
  .text-display-sm  { font-size: 1.75rem; }
  
  .text-headline-lg { font-size: 1.75rem; }
  .text-headline-md { font-size: 1.5rem; }
  .text-headline-sm { font-size: 1.25rem; }
}

/* Weight utilities */
.font-light       { font-weight: 300; }
.font-regular     { font-weight: 400; }
.font-medium      { font-weight: 500; }
.font-semibold    { font-weight: 600; }
.font-bold        { font-weight: 700; }
.font-black       { font-weight: 900; }

/* Tracking */
.tracking-tighter  { letter-spacing: -0.02em; }
.tracking-tight    { letter-spacing: -0.01em; }
.tracking-normal   { letter-spacing: 0; }
.tracking-wide     { letter-spacing: 0.025em; }
.tracking-wider    { letter-spacing: 0.05em; }
.tracking-widest   { letter-spacing: 0.1em; }
.tracking-ultra    { letter-spacing: 0.15em; }
.tracking-extreme  { letter-spacing: 0.3em; }

.uppercase { text-transform: uppercase; }

/* ===========================================
   4. LAYOUT UTILITIES
   =========================================== */
.container {
  width: 100%;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
}

.section-padding {
  padding: var(--space-12) var(--space-4);
}

@media (min-width: 768px) {
  .container {
    padding-left: var(--space-12);
    padding-right: var(--space-12);
  }
  
  .section-padding {
    padding: var(--space-24) var(--space-12);
  }
}

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

@media (min-width: 768px) {
  .grid-12 {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-8);
  }
}

/* Flexbox */
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.flex-row    { flex-direction: row; }
.flex-wrap   { flex-wrap: wrap; }
.items-center     { align-items: center; }
.items-start      { align-items: flex-start; }
.items-end        { align-items: flex-end; }
.justify-center   { justify-content: center; }
.justify-between  { justify-content: space-between; }
.justify-end      { justify-content: flex-end; }

/* Sizing */
.w-full      { width: 100%; }
.h-full      { height: 100%; }
.max-w-sm    { max-width: 24rem; }
.max-w-md    { max-width: 28rem; }
.max-w-lg    { max-width: 32rem; }
.max-w-xl    { max-width: 36rem; }
.max-w-2xl   { max-width: 42rem; }
.max-w-3xl   { max-width: 48rem; }
.max-w-4xl   { max-width: 56rem; }
.max-w-7xl   { max-width: 80rem; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.inset-0  { top: 0; right: 0; bottom: 0; left: 0; }
.z-10     { z-index: 10; }
.z-20     { z-index: 20; }
.z-50     { z-index: 50; }

/* Overflow */
.overflow-hidden { overflow: hidden; }

/* ===========================================
   5. IMAGE / FILTER UTILITIES
   =========================================== */
.grayscale {
  filter: grayscale(100%);
}

.object-cover {
  object-fit: cover;
}

/* ===========================================
   6. MATERIAL SYMBOLS
   =========================================== */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ===========================================
   7. SELECTION
   =========================================== */
::selection {
  background: var(--color-secondary);
  color: var(--color-on-secondary);
}

/* ===========================================
   8. CUSTOM SCROLLBAR
   =========================================== */

/* Webkit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-primary-container);
}

::-webkit-scrollbar-thumb {
  background: var(--color-secondary);
  border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-secondary-container);
}

::-webkit-scrollbar-corner {
  background: var(--color-primary-container);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-secondary) var(--color-primary-container);
}

/* ===========================================
   8. RESPONSIVE BREAKPOINTS
   =========================================== */
/* Mobile-first. md = 768px, lg = 1024px */

/* ===========================================
   9. SCROLL REVEAL — Global Animation System
   =========================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delay helpers */
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.40s; }

/* Slide from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide from right */
.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale up */
.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }
}