/* ============================================================================
   TOSHNI-TEK INTERNATIONAL — Color & Type Foundations
   Brand: high-end technology for construction (surveying) & industrial automation
   Extracted from logo: charcoal #373435 · signal blue #0098DA · steel gray #848688
   ============================================================================ */

/* ---- Fonts ---------------------------------------------------------------- */
@font-face {
  font-family: "Harabara";
  src: url("fonts/Harabara.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}
/* Body & data faces loaded from Google Fonts in HTML:
   IBM Plex Sans (UI/body) · IBM Plex Mono (specs, part numbers, data) */

:root {
  /* ====================== BRAND CORE ====================== */
  --brand-charcoal: #373435;   /* logo wordmark "toshni" / reverse background */
  --brand-blue:     #0098da;   /* logo "tek" — the signal / action color      */
  --brand-gray:     #848688;   /* logo "international" — secondary             */

  /* ====================== NEUTRAL / INK SCALE ====================== */
  --ink-900: #1e1c1d;
  --ink-800: #373435;  /* brand charcoal */
  --ink-700: #4a4748;
  --ink-600: #5e5b5c;
  --ink-500: #848688;  /* brand gray */
  --ink-400: #a3a5a7;
  --ink-300: #c7c8ca;
  --ink-200: #e4e5e6;
  --ink-150: #ecedee;
  --ink-100: #f2f3f4;
  --ink-50:  #f8f9fa;
  --white:   #ffffff;

  /* ====================== SIGNAL BLUE SCALE ====================== */
  --blue-800: #005c87;
  --blue-700: #0070a3;
  --blue-600: #0084c2;
  --blue-500: #0098da;  /* brand blue */
  --blue-400: #2daee5;
  --blue-300: #7bcbef;
  --blue-200: #b6e2f7;
  --blue-100: #dcf1fb;
  --blue-50:  #eff8fe;

  /* ====================== SEMANTIC / STATUS ====================== */
  /* Industrial status semantics: running / caution / fault / offline */
  --ok-600:    #1f8a52;
  --ok-500:    #2ea66b;
  --ok-100:    #e2f4ea;
  --warn-600:  #c4881f;
  --warn-500:  #e0a030;
  --warn-100:  #fbf0d8;
  --fault-600: #c43d3d;
  --fault-500: #d64545;
  --fault-100: #fbe5e5;
  --offline:   #a3a5a7;

  /* ====================== SURFACES & FOREGROUNDS ====================== */
  --bg:         var(--white);
  --bg-subtle:  var(--ink-50);
  --bg-panel:   var(--ink-100);
  --bg-inverse: var(--brand-charcoal);

  --fg1: var(--ink-900);   /* primary text / headings                  */
  --fg2: var(--ink-700);   /* body text                                */
  --fg3: var(--ink-500);   /* secondary / captions / metadata          */
  --fg4: var(--ink-400);   /* disabled / placeholder                   */
  --fg-on-dark:  #ffffff;
  --fg-on-dark-2: #c7c8ca;
  --accent: var(--blue-500);
  --accent-ink: var(--blue-700); /* accent text on light bg (AA)       */

  --border:        var(--ink-200);
  --border-strong: var(--ink-300);
  --border-focus:  var(--blue-500);

  /* ====================== TYPE FAMILIES ====================== */
  --font-display: "Harabara", "Arial Narrow", system-ui, sans-serif; /* brand wordmark face */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ====================== TYPE SCALE (1.25 major third) ============ */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   25px;
  --text-2xl:  31px;
  --text-3xl:  39px;
  --text-4xl:  49px;
  --text-5xl:  61px;
  --text-6xl:  76px;

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-normal:1.55;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.08em;   /* eyebrows / overlines */
  --tracking-wider: 0.16em;

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

  /* ====================== SPACING (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;

  /* ====================== RADII ====================== */
  /* Brand geometry is squared & precise — radii stay tight */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ====================== ELEVATION / SHADOW ====================== */
  /* Cool, low-spread shadows tinted toward charcoal — engineered, not soft */
  --shadow-sm: 0 1px 2px rgba(30,28,29,0.06), 0 1px 1px rgba(30,28,29,0.04);
  --shadow-md: 0 2px 6px rgba(30,28,29,0.08), 0 1px 2px rgba(30,28,29,0.06);
  --shadow-lg: 0 8px 24px rgba(30,28,29,0.10), 0 2px 6px rgba(30,28,29,0.06);
  --shadow-xl: 0 18px 48px rgba(30,28,29,0.14), 0 4px 12px rgba(30,28,29,0.08);
  --shadow-focus: 0 0 0 3px rgba(0,152,218,0.30);

  /* ====================== MOTION ====================== */
  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* ============================================================================
   SEMANTIC ELEMENT STYLES — apply via classes or as a reference
   ============================================================================ */

.tt-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--fg1);
  text-transform: lowercase; /* the wordmark is lowercase; display echoes it */
}

.tt-h1 { font-family: var(--font-display); font-size: var(--text-5xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg1); font-weight: 400; }
.tt-h2 { font-family: var(--font-display); font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg1); font-weight: 400; }
.tt-h3 { font-family: var(--font-sans); font-size: var(--text-2xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--fg1); font-weight: 600; }
.tt-h4 { font-family: var(--font-sans); font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--fg1); font-weight: 600; }
.tt-h5 { font-family: var(--font-sans); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--fg1); font-weight: 600; }

.tt-body-lg { font-family: var(--font-sans); font-size: var(--text-md); line-height: var(--leading-normal); color: var(--fg2); font-weight: 400; }
.tt-body    { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--fg2); font-weight: 400; }
.tt-body-sm { font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--fg2); font-weight: 400; }
.tt-caption { font-family: var(--font-sans); font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--fg3); font-weight: 400; }

/* Eyebrow / overline — uppercase, tracked, used above section titles */
.tt-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--accent-ink);
}

/* Mono — part numbers, specs, model codes, data readouts */
.tt-mono { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: 0; color: var(--fg2); }
.tt-spec { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg3); }

a.tt-link { color: var(--accent-ink); text-decoration: none; border-bottom: 1px solid var(--blue-200); transition: border-color var(--dur-fast) var(--ease-standard); }
a.tt-link:hover { border-bottom-color: var(--blue-500); }