/**
 * Balluff Design System — Colors & Type
 * =====================================
 * Single import you can drop into any HTML file in this project. Pulls in
 * Roboto Flex (the only Balluff typeface) and exposes both the raw token
 * palette and a small set of semantic helpers (h1, h2, p, code, etc).
 *
 * Source of truth: design.md / tokens.css (mirrored from the canonical repo).
 *   • Colors: achromatic + Balluff Red as condiment, plus data-viz and
 *     UI-state palettes for charts and semantic states.
 *   • Type: weight + size do hierarchy. Italic is reserved for proper-noun
 *     emphasis. Color is supportive, never load-bearing.
 *
 * Usage:
 *   <link rel="stylesheet" href="colors_and_type.css" />
 *   <h1 class="h1">…</h1>   or just rely on element defaults.
 */

/* ─────────────────────────────────────────────────────────────────────────
 * Roboto Flex — variable font, served locally for offline tools.
 * ───────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Roboto Flex";
  src: url("fonts/Roboto_Flex/RobotoFlex-VariableFont.ttf") format("truetype-variations"),
       url("fonts/Roboto_Flex/RobotoFlex-VariableFont.ttf") format("truetype");
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ───────────────────────────────────────────────────────────────────────
   * Brand palette — achromatic + Balluff Red. Red is condiment, not paint.
   * ─────────────────────────────────────────────────────────────────────── */
  --color-balluff-black: #1d1d1b;
  --color-balluff-white: #ffffff;
  --color-balluff-red:   #e73446;
  --color-balluff-red-hover: #d42d3d;     /* primary button hover (~8% darker) */

  /* Gray ramp — derived as tints of #1d1d1b. */
  --color-gray-50:  #f5f5f5;  /*  5% — subtle bg / card fill */
  --color-gray-100: #ededed;  /*  7% — between 50 and 200 (web hover surfaces) */
  --color-gray-200: #e6e6e6;  /* 10% — border / divider */
  --color-gray-300: #d4d4d4;  /* 17% — input border on dark surfaces */
  --color-gray-400: #9e9e9e;  /* 40% — disabled text / inactive UI */
  --color-gray-500: #828281;  /* 50% — placeholder text */
  --color-gray-600: #6b6b6a;  /* 60% — secondary text */
  --color-gray-700: #545453;  /* 70% — heading-secondary on light */
  --color-gray-800: #414140;  /* 80% — heading-secondary / dark UI */
  --color-gray-900: #1d1d1b;  /* primary text — same as balluff-black */

  /* ───────────────────────────────────────────────────────────────────────
   * Data-viz palette — charts, KPIs, diagrams. Never as brand surface.
   * ─────────────────────────────────────────────────────────────────────── */
  --color-chart-blue:   #6A9DC6;
  --color-chart-cyan:   #70BFD7;
  --color-chart-gray:   #94A7B4;
  --color-chart-silver: #BCBCBC;
  --color-chart-teal:   #A3C7C7;
  --color-chart-green:  #779389;

  /* ───────────────────────────────────────────────────────────────────────
   * UI state palette — semantic. Error red ≠ Balluff Red.
   * ─────────────────────────────────────────────────────────────────────── */
  --color-error:    #d32f2f;
  --color-error-bg: #fdecec;
  --color-success:  #2e7d32;
  --color-success-bg: #eaf3eb;
  --color-warning:  #f9a825;
  --color-warning-bg: #fef6e3;
  --color-info:     #6A9DC6;
  --color-info-bg:  #eaf2f8;
  --color-disabled: #BCBCBC;

  /* ───────────────────────────────────────────────────────────────────────
   * Semantic foreground / background aliases.
   * Use these in components rather than the raw ramp where possible.
   * ─────────────────────────────────────────────────────────────────────── */
  --fg-primary:   var(--color-gray-900);   /* body text, headings */
  --fg-secondary: var(--color-gray-600);   /* lede, captions */
  --fg-tertiary:  var(--color-gray-400);   /* helper, hint */
  --fg-on-dark:   var(--color-balluff-white);
  --fg-accent:    var(--color-balluff-red);
  --fg-link:      var(--color-balluff-red);

  --bg-canvas:    var(--color-balluff-white);
  --bg-subtle:    var(--color-gray-50);
  --bg-muted:     var(--color-gray-100);
  --bg-dark:      var(--color-balluff-black);

  --border-hairline: var(--color-gray-200);
  --border-strong:   var(--color-gray-800);
  --border-focus:    var(--color-balluff-red);

  /* ───────────────────────────────────────────────────────────────────────
   * Typography — Roboto Flex everywhere; weight + size do hierarchy.
   * Type scale is PMM-derived and pinned to design.md.
   * ─────────────────────────────────────────────────────────────────────── */
  --font-sans: "Roboto Flex", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;

  --text-xs:   0.75rem;   /* 12 px */
  --text-sm:   0.875rem;  /* 14 px */
  --text-base: 1rem;      /* 16 px */
  --text-lg:   1.125rem;  /* 18 px */
  --text-xl:   1.25rem;   /* 20 px — H4 */
  --text-2xl:  1.5rem;    /* 24 px — H3 */
  --text-3xl:  1.875rem;  /* 30 px — H2 small */
  --text-4xl:  2.25rem;   /* 36 px — H2 standard */
  --text-5xl:  3rem;      /* 48 px — H1 */
  --text-6xl:  3.75rem;   /* 60 px — oversized hero H1, sparingly */

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.6;

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

  /* ───────────────────────────────────────────────────────────────────────
   * Layout — spacing (4 px base), radius (mostly square), elevation (flat).
   * ─────────────────────────────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 9999px;

  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10);

  --container-balluff: 1280px;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Element defaults — Roboto Flex everywhere. Headings left-aligned.
 * ───────────────────────────────────────────────────────────────────────── */
html { font-family: var(--font-sans); }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  font-weight: var(--weight-regular);
  color: var(--fg-primary);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--fg-primary);
  text-align: left;
  margin: 0;
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1, .h1 { font-size: var(--text-5xl); line-height: var(--leading-tight); letter-spacing: -0.02em; }
h2, .h2 { font-size: var(--text-4xl); line-height: 1.15; letter-spacing: -0.015em; }
h3, .h3 { font-size: var(--text-2xl); line-height: var(--leading-snug); }
h4, .h4 { font-size: var(--text-xl);  line-height: 1.4; }
h5, .h5 { font-size: var(--text-lg);  line-height: 1.4; }
h6, .h6 { font-size: var(--text-base); line-height: 1.4; }

.eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-balluff-red);
}

.lede {
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--color-gray-800);
  font-weight: var(--weight-regular);
  text-wrap: pretty;
}

p, .p {
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--fg-primary);
  margin: 0;
  text-wrap: pretty;
}

small, .text-sm { font-size: var(--text-sm); line-height: var(--leading-normal); }
.text-xs { font-size: var(--text-xs); line-height: 1.4; }

/* Inline body link — red, no underline, underline on hover. */
a {
  color: var(--fg-link);
  text-decoration: none;
  transition: text-decoration-color 120ms ease;
}
a:hover { text-decoration: underline; }
a:focus-visible {
  outline: 2px solid var(--color-balluff-red);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Quiet link — for footers, breadcrumbs, secondary nav. */
.link-quiet {
  color: var(--color-gray-600);
}
.link-quiet:hover { color: var(--color-gray-900); }

strong, b { font-weight: var(--weight-bold); }
em, i { font-style: italic; } /* reserved for proper-noun emphasis */

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code {
  background: var(--color-gray-50);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-gray-200);
}

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

::selection { background: var(--color-balluff-red); color: var(--color-balluff-white); }