/**
 * Balluff design tokens — Tailwind v4 @theme block
 * ==================================================
 * Mirror of the upstream canonical token file
 * (Balluff-PMM/ai-marketing → design-system/tokens.css).
 *
 * Source of truth: README.md + colors_and_type.css. Layout scales
 * (spacing/breakpoints/radius/elevation) are PMM-derived; brand colors
 * are from Balluff brand sources.
 *
 * Usage (Tailwind v4):
 *   @import "tailwindcss";
 *   @import "./tokens.css";
 *
 * For non-Tailwind use, import colors_and_type.css instead — it ships the
 * same tokens as plain CSS variables on :root, plus Roboto Flex @font-face
 * and element defaults.
 */

@theme {
  /* Brand palette */
  --color-balluff-black: #1d1d1b;
  --color-balluff-white: #ffffff;
  --color-balluff-red:   #e73446;

  /* Gray ramp — tints of #1d1d1b */
  --color-gray-50:  #f5f5f5;
  --color-gray-200: #e6e6e6;
  --color-gray-400: #9e9e9e;
  --color-gray-600: #6b6b6a;
  --color-gray-800: #414140;
  --color-gray-900: #1d1d1b;

  /* Data-viz palette — charts/diagrams/KPIs only */
  --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, not decorative */
  --color-error:    #d32f2f;
  --color-success:  #2e7d32;
  --color-warning:  #f9a825;
  --color-info:     #6A9DC6;
  --color-disabled: #BCBCBC;

  /* Typography */
  --font-sans: "Roboto Flex", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs:                 0.75rem;
  --text-xs--line-height:    1.4;
  --text-sm:                 0.875rem;
  --text-sm--line-height:    1.5;
  --text-base:               1rem;
  --text-base--line-height:  1.6;
  --text-lg:                 1.125rem;
  --text-lg--line-height:    1.5;
  --text-xl:                 1.25rem;
  --text-xl--line-height:    1.4;
  --text-2xl:                1.5rem;
  --text-2xl--line-height:   1.3;
  --text-3xl:                1.875rem;
  --text-3xl--line-height:   1.25;
  --text-4xl:                2.25rem;
  --text-4xl--line-height:   1.15;
  --text-5xl:                3rem;
  --text-5xl--line-height:   1.1;
  --text-6xl:                3.75rem;
  --text-6xl--line-height:   1.05;

  --spacing: 0.25rem; /* 4 px base */

  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
  --breakpoint-2xl: 96rem;
  --container-balluff: 80rem;

  --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);
}