/* =============================================================================
   Mechanical Studio Limited — base.css
   Custom properties, reset, typography, global base styles
   ============================================================================= */

/* 1. CSS Custom Properties
   ============================================================================= */
:root {
  /* Brand Colors */
  --color-primary:        #009999;
  --color-primary-dark:   #026B6B;
  --color-primary-mid:    #5BBDBD;
  --color-primary-light:  #DFF2F2;

  /* Teal Scale */
  --color-teal-900: #013D3D;
  --color-teal-800: #026B6B;
  --color-teal-700: #017A7A;
  --color-teal-600: #008888;
  --color-teal-500: #009999;
  --color-teal-400: #33AAAA;
  --color-teal-300: #5BBDBD;
  --color-teal-200: #99D6D6;
  --color-teal-100: #C4E9E9;
  --color-teal-50:  #DFF2F2;

  /* Neutrals */
  --color-ink:      #0B0F14;
  --color-muted:    #767171;
  --color-card:     #F3F3F3;
  --color-white:    #FFFFFF;
  --color-charcoal: #1A2332;

  /* Semantic */
  --color-success: #00A896;
  --color-warning: #D97706;
  --color-error:   #B91C1C;
  --color-info:    #1D4ED8;

  /* Typography */
  --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Courier New', monospace;

  /* Type Scale */
  --text-hero:    clamp(40px, 6vw, 72px);
  --text-h1:      clamp(30px, 4vw, 44px);
  --text-h2:      clamp(24px, 3vw, 34px);
  --text-h3:      clamp(19px, 2.5vw, 26px);
  --text-h4:      20px;
  --text-h5:      17px;
  --text-body-lg: 18px;
  --text-body:    16px;
  --text-body-sm: 14px;
  --text-label:   12px;
  --text-mono:    13px;

  /* Spacing (8px base unit) */
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  48px;
  --space-6:  64px;
  --space-7:  80px;
  --space-8:  96px;
  --space-9:  120px;
  --space-section: clamp(64px, 8vw, 120px);

  /* Layout */
  --max-width:   1280px;
  --gutter:      24px;
  --radius-sm:   2px;
  --radius:      4px;
  --radius-lg:   8px;
  --radius-pill: 100px;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(11,15,20,0.08), 0 1px 2px rgba(11,15,20,0.06);
  --shadow-md:   0 4px 12px rgba(11,15,20,0.10), 0 2px 4px rgba(11,15,20,0.06);
  --shadow-lg:   0 12px 32px rgba(11,15,20,0.12), 0 4px 8px rgba(11,15,20,0.06);
  --shadow-teal: 0 4px 20px rgba(0,153,153,0.20);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease-out;
  --transition-slow:   300ms ease;
  --transition-reveal: 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--color-ink);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

img { height: auto; }

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

button {
  font-family: inherit;
  cursor: pointer;
}

ul, ol { list-style: none; }

/* 3. Typography
   ============================================================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-ink);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); font-weight: 600; }
h4 { font-size: var(--text-h4); font-weight: 600; }
h5 { font-size: var(--text-h5); font-weight: 600; }

p {
  max-width: 72ch;
  line-height: 1.65;
}

p + p { margin-top: 1em; }

strong { font-weight: 600; }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
}

/* Eyebrow label */
.eyebrow {
  display: block;
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.eyebrow--light {
  color: rgba(255,255,255,0.75);
}

/* 4. Focus styles
   ============================================================================= */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

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

/* 6. Print
   ============================================================================= */
@media print {
  .site-header,
  .site-footer,
  .hero-slider__controls,
  .btn,
  .hero__actions { display: none !important; }

  body { font-size: 12pt; color: #000; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 10pt; }
}