/* ==========================================================================
   main.css — design tokens, reset, base typography, layout utilities, buttons
   Source of truth: design/site/colors_and_type.css
   Mobile-first. No external frameworks.
   ========================================================================== */


/* ==========================================================================
   1. Design Tokens (exact names + values from colors_and_type.css)
   ========================================================================== */

:root {
  /* ---- Font families (Poppins for everything) ---- */
  --font-script:  'Allura', 'Snell Roundhand', cursive;
  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'SFMono-Regular', ui-monospace, 'Menlo', monospace;

  /* ---- Colors (monochrome brand — black is the accent) ---- */
  --ink:           #1A1A1A;
  --ink-secondary:   #009BDF;
  --fg-1:          #1A1A1A;
  --fg-2:          #555150;
  --fg-3:          #8C8884;
  --fg-on-dark:    #FFFFFF;
  --fg-on-dark-2:  #B7B3AD;

  --bg-1:          #FFFFFF;
  --bg-2:          #F6F5F2;
  --bg-3:          #ECEAE5;
  --bg-dark:       #1A1A1A;

  --border:        #E4E1DB;
  --border-strong: #1A1A1A;

  --accent:        #009BDF;
  --accent-hover:  #007BB5;
  --accent-soft:   #F0EEEA;

  /* ---- Type scale (px, modular ~1.25) ---- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 17px;
  --text-md:   20px;
  --text-lg:   26px;
  --text-xl:   34px;
  --text-2xl:  46px;
  --text-3xl:  64px;
  --text-4xl:  88px;

  /* ---- Font weights ---- */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;

  /* ---- Letter-spacing ---- */
  --ls-label: 0.22em;
  --ls-tight: -0.01em;

  /* ---- Radii (square / sharp brand) ---- */
  --radius-none: 0px;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-pill: 999px;

  /* ---- Spacing (8pt grid) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  40px;
  --space-6:  64px;
  --space-7:  96px;
  --space-8:  140px;

  /* ---- Shadows (used sparingly) ---- */
  --shadow-sm: 0 1px 2px rgba(26,26,26,0.05);
  --shadow-md: 0 12px 30px rgba(26,26,26,0.08);
  --shadow-lg: 0 24px 60px rgba(26,26,26,0.12);

  /* ---- Motion ---- */
  --ease:      cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast:  160ms;
  --dur:       280ms;
  --dur-slow:  500ms;

  /* ---- Layout ---- */
  --container-max:     1140px;
  --container-px:      32px;
  --section-py:        96px;
}

@media (max-width: 768px) {
  :root {
    --container-px: 20px;
    --section-py:   64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur:      0ms;
    --dur-slow: 0ms;
  }
}


/* ==========================================================================
   2. Reset
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px; /* breathing room — no fixed header to clear */
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--w-regular);
  line-height: 1.75;
  color: var(--fg-2);
  background-color: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

ul,
ol {
  list-style: none;
}

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

button {
  cursor: pointer;
  background: none;
  border: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* ==========================================================================
   3. Base Typography — semantic sj-* classes (from colors_and_type.css)
   ========================================================================== */

.sj-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--text-sm);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-3);
  display: block;
}

.sj-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: clamp(46px, 6.4vw, var(--text-4xl));
  line-height: 1.02;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}

.sj-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: clamp(28px, 3.4vw, var(--text-2xl));
  line-height: 1.12;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}

.sj-h3 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--text-lg);
  line-height: 1.25;
  color: var(--ink);
}

.sj-h4 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--text-md);
  line-height: 1.3;
  color: var(--ink);
}

.sj-lead {
  font-family: var(--font-body);
  font-weight: var(--w-light);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--fg-2);
}

.sj-body {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--fg-2);
}

.sj-small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--fg-3);
}

.sj-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--fg-2);
}

/* Dark-bg overrides */
.on-dark .sj-eyebrow { color: var(--fg-on-dark-2); }
.on-dark .sj-h1,
.on-dark .sj-h2,
.on-dark .sj-h3,
.on-dark .sj-h4 { color: var(--fg-on-dark); }
.on-dark .sj-lead,
.on-dark .sj-body { color: var(--fg-on-dark-2); }

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}


/* ==========================================================================
   4. Layout Utilities
   ========================================================================== */

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

/* Section */
.section {
  padding-block: var(--section-py);
}

.section--bg-2 { background-color: var(--bg-2); }
.section--bg-dark {
  background-color: var(--bg-dark);
  color: var(--fg-on-dark);
}

/* Two-column grid (used by hero, about, skills, contact) */
.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .two-col {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: center;
  }
}

/* Three-column grid (services, projects) */
.three-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

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

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

/* Four-column grid (companies) */
.four-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .four-col { grid-template-columns: repeat(4, 1fr); }
}

/* Flex utilities */
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col     { display: flex; flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.gap-2        { gap: var(--space-2); }
.gap-3        { gap: var(--space-3); }
.gap-4        { gap: var(--space-4); }

/* Spacing helpers */
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }

/* Text align */
.text-center { text-align: center; }

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


/* ==========================================================================
   5. Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--w-semibold);
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--dur-fast) var(--ease),
    color            var(--dur-fast) var(--ease),
    border-color     var(--dur-fast) var(--ease),
    box-shadow       var(--dur-fast) var(--ease),
    transform        var(--dur-fast) var(--ease);
}

.btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.btn:active {
  transform: translateY(1px);
}

/* Fill — dark fill, white text */
.btn--fill {
  background-color: var(--accent);
  color: var(--fg-on-dark);
  border-color: var(--accent);
}

.btn--fill:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: var(--shadow-md);
}

/* Outline — transparent fill, dark border */
.btn--outline {
  background-color: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn--outline:hover {
  background-color: var(--ink-secondary);
  border-color: var(--secondary);
  color: var(--fg-on-dark);
  box-shadow: var(--shadow-md);
}

/* Outline on dark backgrounds */
.btn--outline-inverse {
  background-color: transparent;
  color: var(--fg-on-dark);
  border-color: var(--fg-on-dark);
}

.btn--outline-inverse:hover {
  background-color: var(--fg-on-dark);
  color: var(--ink);
}

/* White fill (used inside dark CTA banner) */
.btn--white {
  background-color: var(--fg-on-dark);
  color: var(--ink);
  border-color: var(--fg-on-dark);
}

.btn--white:hover {
  background-color: var(--bg-2);
  border-color: var(--bg-2);
}