/* ==========================================================================
   Team One Integration — Colors & Type
   Industrial automation / SCADA engineering firm. Industrial, clean, credible.
   ========================================================================== */

/* Local font files. Futura + Gill Sans collections include multiple weights. */
@font-face {
  font-family: 'Futura';
  src: url('fonts/Futura.ttc') format('truetype-collection'),
       url('fonts/Futura.ttc') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gill Sans';
  src: url('fonts/GillSans.ttc') format('truetype-collection'),
       url('fonts/GillSans.ttc') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600&display=swap');

:root {
  /* ------- Approved T1 palette (from color-palette.html) ------- */
  --t1-sky-blue:        #8BBCCE;   /* Secondary accent: hover states, icon tints */
  --t1-mid-blue:        #5492AE;   /* Primary accent: buttons, links, CTAs */
  --t1-deep-blue:       #2D6080;   /* Dark section backgrounds, hero panels */
  --t1-charcoal:        #1A2E2E;   /* Headings and body text on light backgrounds */
  --t1-off-white:       #F0F4F4;   /* Page background, card surfaces */
  --t1-grey:            #D4DCDC;   /* Borders, dividers, input strokes */
  --t1-near-black:      #1A2E2E;   /* Headings and body text on light backgrounds */
  --t1-deep-black:      #0D1A1A;   /* Logo, footer text, max-contrast contexts */
  --t1-white:           #FFFFFF;
  --t1-on-deep:         #C0D8E8;   /* Body text on Deep Blue backgrounds */
  --t1-on-charcoal:     #A8B4C8;   /* Body text on Charcoal backgrounds */

  /* Legacy aliases — keep var() refs in site.css working without edits */
  --t1-charcoal-deep:   #0D1A1A;
  --t1-charcoal-soft:   #2E3244;
  --t1-teal:            #5492AE;
  --t1-teal-deep:       #2D6080;
  --t1-teal-soft:       #8BBCCE;
  --t1-steel:           #8BBCCE;
  --t1-steel-light:     #8BBCCE;
  --t1-steel-deep:      #2D6080;
  --t1-paper:           #F0F4F4;
  --t1-mist:            #F0F4F4;
  --t1-fog:             #D4DCDC;
  --t1-graphite:        #1A2E2E;
  --t1-ink:             #0D1A1A;

  /* Semantic / functional */
  --t1-success:         #4F7C4A;
  --t1-warning:         #B8893A;
  --t1-danger:          #A2453E;
  --t1-info:            #5492AE;

  /* ------- Surface tokens ------- */
  --bg:                 #F0F4F4;
  --bg-alt:             #FFFFFF;
  --bg-dark:            #2D6080;
  --bg-darker:          #2E3244;

  --fg:                 #1A2E2E;
  --fg-muted:           #1A2E2E;
  --fg-on-dark:         #FFFFFF;
  --fg-on-dark-muted:   #C0D8E8;

  --accent:             #5492AE;
  --accent-hover:       #2D6080;
  --accent-soft:        #8BBCCE;

  --border:             #D4DCDC;
  --border-strong:      #D4DCDC;
  --rule:               #2E3244;

  /* ------- Shadows (rgba derived from #0D1A1A) ------- */
  --shadow-xs:    0 1px 2px rgba(13,26,26,.06);
  --shadow-sm:    0 1px 3px rgba(13,26,26,.08), 0 1px 2px rgba(13,26,26,.04);
  --shadow-md:    0 4px 12px rgba(13,26,26,.08), 0 1px 3px rgba(13,26,26,.04);
  --shadow-lg:    0 12px 32px rgba(13,26,26,.12), 0 2px 6px rgba(13,26,26,.06);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.04);

  /* ------- Typography ------- */
  --font-display:       "Futura", "Futura PT", "Avenir Next", "Trebuchet MS", Helvetica, Arial, sans-serif;
  --font-body:          "Gill Sans", "Gill Sans MT", "Gill Sans Nova", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:          "JetBrains Mono", "Consolas", "Menlo", monospace;

  --weight-light:       300;
  --weight-regular:     400;
  --weight-medium:      500;
  --weight-semibold:    600;
  --weight-bold:        700;

  /* Type scale — desktop. Mobile knocks down via clamp(). */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   30px;
  --fs-3xl:   38px;
  --fs-4xl:   48px;
  --fs-5xl:   60px;
  --fs-6xl:   76px;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.55;
  --lh-loose:   1.7;

  --tracking-display:   -0.01em;
  --tracking-eyebrow:   0.18em;
  --tracking-label:     0.06em;

  /* ------- Spacing scale (4px base) ------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  --container-max:      1200px;
  --container-prose:    720px;

  /* ------- Radii — restrained, industrial ------- */
  --radius-none: 0px;
  --radius-xs:   2px;
  --radius-sm:   3px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-pill: 999px;

  /* ------- Motion ------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:      120ms;
  --dur-base:      180ms;
  --dur-slow:      280ms;
}

/* ==========================================================================
   Element defaults — semantic typography
   ========================================================================== */

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--weight-regular);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  font-weight: var(--weight-bold);
  text-wrap: balance;
}

h1 { font-size: clamp(var(--fs-3xl), 4.5vw, var(--fs-6xl)); font-weight: 800; }
h2 { font-size: clamp(var(--fs-2xl), 3.2vw, var(--fs-4xl)); }
h3 { font-size: clamp(var(--fs-xl), 2.2vw, var(--fs-2xl)); font-weight: var(--weight-semibold); }
h4 { font-size: var(--fs-lg); font-weight: var(--weight-semibold); }
h5 { font-size: var(--fs-md); font-weight: var(--weight-semibold); font-family: var(--font-body); }
h6 {
  font-size: var(--fs-xs);
  font-weight: var(--weight-bold);
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--accent);
}

p { font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-loose); text-wrap: pretty; margin: 0 0 1em; }

.lead { font-size: var(--fs-lg); line-height: var(--lh-normal); color: var(--fg-muted); }
.eyebrow { font-size: var(--fs-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--accent); font-family: var(--font-body); }
.tagline { font-family: var(--font-display); font-style: italic; font-weight: var(--weight-regular); color: var(--t1-charcoal); }

a { color: var(--accent); text-decoration: none; transition: color var(--dur-base) var(--ease-standard); }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

small, .text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.muted { color: var(--fg-muted); }

code, pre, kbd { font-family: var(--font-mono); font-size: 0.92em; }
code { background: var(--t1-mist); padding: 0.1em 0.35em; border-radius: var(--radius-xs); border: 1px solid var(--border); }

hr { border: none; border-top: 1px solid var(--border); margin: var(--space-6) 0; }
hr.accent { border-top: 2px solid var(--accent); width: 56px; margin: var(--space-4) 0; }

/* Selection */
::selection { background: var(--t1-steel-light); color: var(--t1-charcoal-deep); }