/* ==========================================================================
   Kontron Design System — Colors & Type
   Source: Kontron Brand Book (internal). Transcribed from screenshots.
   Font substitution: Exo 2 (Google Fonts) stands in for the proprietary
   "Kontron" font (a variation of Exo 2.0). FLAG: ask user for real font files.
   ========================================================================== */

/* -- Kontron corporate font (provided .ttf files) -------------------------- */
@font-face { font-family: 'Kontron'; src: url('fonts/Kontron-Thin.ttf')        format('truetype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Kontron'; src: url('fonts/Kontron-ThinItalic.ttf')  format('truetype'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Kontron'; src: url('fonts/Kontron-Light.ttf')       format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Kontron'; src: url('fonts/Kontron-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Kontron'; src: url('fonts/Kontron-Regular.ttf')     format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Kontron'; src: url('fonts/Kontron-Medium.ttf')      format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Kontron'; src: url('fonts/Kontron-Bold.ttf')        format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ---------- Core Blues --------------------------------------------------- */
  --kontron-blue:      #005083; /* PRIMARY. Pantone 647 C */
  --black-blue:        #113350; /* Deep, for dark blocks/headers */
  --blue:              #006BAC; /* Mid-bright, graphic elements */
  --mid-blue:          #4A86B5; /* Supporting */
  --light-blue:        #A1BBD0; /* Tints, backgrounds */

  /* ---------- Green (Signal / Accent) -------------------------------------- */
  --kontron-green:     #3FB498; /* Pantone 3285 C. Logo k-accent, signal color */

  /* ---------- Neutrals ----------------------------------------------------- */
  --black:             #000000; /* Text <9pt (100% black per print rules) */
  --dark-grey:         #58585A; /* Text >9pt (80% black per print rules) */
  --grey:              #808080; /* Graphic blocks, secondary text */
  --light-grey:        #F2F2F2; /* Backgrounds, cards */
  --white:             #FFFFFF;

  /* ---------- Highlight Colors (use SPARINGLY — icons / CTAs only) --------- */
  --kontron-magenta:   #E50076;
  --kontron-cyan:      #00FFFF;

  /* ---------- Signature Gradient ------------------------------------------- */
  --gradient-linear:   linear-gradient(90deg, var(--kontron-blue) 0%, var(--kontron-green) 100%);
  --gradient-diagonal: linear-gradient(45deg, var(--kontron-blue) 0%, var(--kontron-green) 100%);
  --gradient-vertical: linear-gradient(180deg, var(--kontron-blue) 0%, var(--kontron-green) 100%);

  /* ---------- Semantic Tokens --------------------------------------------- */
  --fg-primary:        var(--kontron-blue);     /* Default headline/body blue */
  --fg-secondary:      var(--dark-grey);
  --fg-muted:          var(--grey);
  --fg-inverse:        var(--white);
  --fg-accent:         var(--kontron-green);

  --bg-base:           var(--white);
  --bg-subtle:         var(--light-grey);
  --bg-dark:           var(--black-blue);
  --bg-brand:          var(--kontron-blue);
  --bg-accent:         var(--kontron-green);

  --border-subtle:     #E0E3E7;
  --border-default:    #C7CDD3;
  --border-strong:     var(--dark-grey);

  /* ---------- Shadows (minimal — brand is flat) ---------------------------- */
  --shadow-sm:         0 1px 2px rgba(17, 51, 80, 0.06);
  --shadow-md:         0 4px 16px rgba(17, 51, 80, 0.08);
  --shadow-lg:         0 12px 40px rgba(17, 51, 80, 0.12);

  /* ---------- Radii (Kontron is SHARP — very small radii) ------------------ */
  --radius-none:       0;
  --radius-sm:         2px;
  --radius-md:         4px;  /* Buttons, inputs */
  --radius-lg:         8px;  /* Cards — rare */

  /* ---------- Spacing (8pt scale) ----------------------------------------- */
  --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;

  /* ---------- Type Families ----------------------------------------------- */
  --font-sans:    'Kontron', 'Exo 2', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-display: 'Kontron', 'Exo 2', system-ui, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---------- Type Weights (Kontron primarily uses LIGHT + REGULAR) -------- */
  --fw-light:     300;  /* Default for headlines — the brand's signature */
  --fw-regular:   400;  /* Body / copy */
  --fw-medium:    500;  /* Headlines with emphasis, product names */
  --fw-bold:      700;  /* Emphasis only */

  /* ---------- Type Scale -------------------------------------------------- */
  --fs-display-xl: clamp(56px, 7vw, 96px);
  --fs-display:    clamp(40px, 5vw, 64px);
  --fs-h1:         clamp(32px, 3.5vw, 48px);
  --fs-h2:         clamp(26px, 2.5vw, 36px);
  --fs-h3:         22px;
  --fs-h4:         18px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-small:      14px;
  --fs-xs:         12px;

  --lh-tight:      1.1;
  --lh-snug:       1.25;
  --lh-normal:     1.5;
  --lh-relaxed:    1.65;

  /* ---------- Transitions ------------------------------------------------- */
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      360ms;
}

/* ==========================================================================
   Semantic element defaults
   ========================================================================== */

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-primary);
  font-weight: var(--fw-light); /* Kontron signature — lightness */
  letter-spacing: -0.01em;
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-regular); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-medium); letter-spacing: 0; }

.display-xl { font-size: var(--fs-display-xl); font-weight: var(--fw-light); line-height: var(--lh-tight); color: var(--fg-primary); letter-spacing: -0.02em; }
.display    { font-size: var(--fs-display);    font-weight: var(--fw-light); line-height: var(--lh-tight); color: var(--fg-primary); letter-spacing: -0.015em; }

p  { margin: 0 0 var(--space-4); color: var(--fg-secondary); line-height: var(--lh-relaxed); }
a  { color: var(--blue); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--kontron-blue); text-decoration: underline; text-underline-offset: 3px; }

small, .small { font-size: var(--fs-small); color: var(--fg-muted); }
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kontron-blue);
}

code, pre { font-family: var(--font-mono); font-size: 0.9em; }
code { background: var(--light-grey); padding: 2px 6px; border-radius: var(--radius-sm); color: var(--black-blue); }

hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-6) 0; }

/* Chevron bullet — a Kontron brandbook motif */
.chevron-list { list-style: none; padding: 0; margin: 0; }
.chevron-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: var(--space-3);
  color: var(--fg-secondary);
}
.chevron-list li::before {
  content: "›";
  position: absolute;
  left: 4px;
  top: -2px;
  color: var(--kontron-blue);
  font-size: 20px;
  font-weight: var(--fw-bold);
}