/*
 * Pipelet EDGE OCPP – design tokens (contract W12.6).
 *
 * The ONLY place of raw values (colours, lengths, durations) besides the theme files in themes/.
 * base.css, layout.css and components.css use var(--…) only (checked by a test).
 *
 * Names: the token names of Momentum Design (primitives --gray-*, --brand-*, …; semantics --color-*,
 * --button-*, --input-*, --badge-*, --ring-*, --indicator-*), so that a Momentum theme is a file of values
 * only. Own additions carry the prefix --pe- and are derived from Momentum names here; a theme need not set
 * them. The VALUES are those of the theme "neutral" (own values, nothing taken from elsewhere).
 *
 * Light mode is the default on :root; dark mode lives in themes/neutral.css.
 */

:root {
  color-scheme: light;

  /* ---------------------------------------------------------------- typography */
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
  --font-family-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --display-xs: 1.5rem;
  --display-sm: 1.875rem;
  --leading-xs: 1rem;
  --leading-sm: 1.25rem;
  --leading-md: 1.5rem;
  --leading-lg: 1.75rem;
  --leading-xl: 2rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ---------------------------------------------------------------- spacing (4-pixel grid) */
  --spacing-xxs: 0.125rem;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.375rem;
  --spacing-md: 0.5rem;
  --spacing-lg: 0.75rem;
  --spacing-xl: 1rem;
  --spacing-2xl: 1.25rem;
  --spacing-3xl: 1.5rem;
  --spacing-4xl: 2rem;
  --spacing-5xl: 2.5rem;

  /* ---------------------------------------------------------------- radii and shadows */
  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-full: 624.9375rem;
  --shadow-xs: 0 1px 2px rgb(14 18 26 / 0.06);
  --shadow-sm: 0 1px 3px rgb(14 18 26 / 0.09), 0 1px 2px rgb(14 18 26 / 0.05);
  --shadow-md: 0 4px 10px -2px rgb(14 18 26 / 0.1), 0 2px 4px -2px rgb(14 18 26 / 0.05);
  --shadow-lg: 0 14px 24px -6px rgb(14 18 26 / 0.14), 0 4px 8px -4px rgb(14 18 26 / 0.06);

  /* ---------------------------------------------------------------- primitives (neutral) */
  --gray-25: #fbfcfd;
  --gray-50: #f6f7f9;
  --gray-100: #eef0f3;
  --gray-200: #e0e4e9;
  --gray-300: #c9cfd7;
  --gray-400: #98a1ae;
  --gray-500: #6a7381;
  --gray-600: #4d5665;
  --gray-700: #394150;
  --gray-800: #252b36;
  --gray-900: #161a22;
  --gray-950: #0c0f14;

  --brand-25: #f3f9fa;
  --brand-50: #e6f3f5;
  --brand-100: #c9e6eb;
  --brand-200: #9bd0da;
  --brand-300: #63b3c3;
  --brand-400: #2e94a8;
  --brand-500: #13798d;
  --brand-600: #0b6475;
  --brand-700: #0a5160;
  --brand-800: #0b414d;
  --brand-900: #0a343e;
  --brand-950: #052127;

  --error-25: #fffafa;
  --error-50: #fef1f0;
  --error-100: #fde1de;
  --error-200: #fac4bf;
  --error-300: #f49a92;
  --error-400: #ea6a5f;
  --error-500: #d94235;
  --error-600: #bb2c20;
  --error-700: #98231a;
  --error-800: #7a2019;
  --error-900: #631e18;
  --error-950: #370c09;

  --warning-25: #fffdf6;
  --warning-50: #fff7e6;
  --warning-100: #feedc2;
  --warning-200: #fcd987;
  --warning-300: #f9c04f;
  --warning-400: #f2a324;
  --warning-500: #dc860c;
  --warning-600: #b26607;
  --warning-700: #8d4d0b;
  --warning-800: #733f10;
  --warning-900: #603411;
  --warning-950: #371b05;

  --success-25: #f6fcf8;
  --success-50: #eaf8ef;
  --success-100: #d0f1dc;
  --success-200: #a5e2bd;
  --success-300: #6fcd97;
  --success-400: #3db173;
  --success-500: #219457;
  --success-600: #187746;
  --success-700: #155e39;
  --success-800: #144b30;
  --success-900: #123e29;
  --success-950: #062314;

  /* ---------------------------------------------------------------- semantics (light) */
  --color-text-primary: var(--gray-900);
  --color-text-secondary: var(--gray-700);
  --color-text-tertiary: var(--gray-600);
  --color-text-disabled: var(--gray-400);
  --color-text-placeholder: var(--gray-500);
  --color-text-white: #ffffff;
  --color-text-error: var(--error-700);
  --color-text-warning: var(--warning-700);
  --color-text-success: var(--success-700);
  --color-text-brand-primary: var(--brand-700);

  --color-bg-primary: #ffffff;
  --color-bg-secondary: var(--gray-50);
  --color-bg-tertiary: var(--gray-100);
  --color-bg-active: var(--brand-50);
  --color-bg-disabled: var(--gray-100);
  --color-bg-overlay: rgb(12 15 20 / 0.55);
  --color-bg-brand-subtle: var(--brand-50);
  --color-bg-error-subtle: var(--error-50);
  --color-bg-warning-subtle: var(--warning-50);
  --color-bg-success-subtle: var(--success-50);

  --color-border-primary: var(--gray-300);
  --color-border-secondary: var(--gray-200);
  --color-border-error: var(--error-600);
  --color-border-brand: var(--brand-600);

  --color-fg-primary: var(--gray-900);
  --color-fg-secondary: var(--gray-600);
  --color-fg-brand-primary: var(--brand-600);
  --color-fg-error-primary: var(--error-600);
  --color-fg-warning-primary: var(--warning-600);
  --color-fg-success-primary: var(--success-600);

  --button-primary-bg: var(--brand-600);
  --button-primary-bg-hover: var(--brand-700);
  --button-primary-fg: var(--color-text-white);
  --button-primary-border: var(--brand-600);
  --button-secondary-bg: var(--color-bg-primary);
  --button-secondary-bg-hover: var(--gray-50);
  --button-secondary-fg: var(--gray-800);
  --button-secondary-border: var(--gray-300);
  --button-error-bg: var(--error-600);
  --button-error-bg-hover: var(--error-700);
  --button-error-fg: var(--color-text-white);
  --button-error-border: var(--error-600);

  --input-bg: var(--color-bg-primary);
  --input-border: var(--gray-500);
  --input-border-hover: var(--gray-600);
  --input-border-focus: var(--brand-600);
  --input-text: var(--gray-900);
  --input-placeholder: var(--gray-500);
  --input-ring-focus: var(--ring-brand);
  --input-disabled-bg: var(--gray-50);

  --ring-brand: 0 0 0 3px rgb(19 121 141 / 0.35);
  --ring-error: 0 0 0 3px rgb(217 66 53 / 0.3);

  --badge-gray-bg: var(--gray-100);
  --badge-gray-fg: var(--gray-700);
  --badge-gray-border: var(--gray-200);
  --badge-brand-bg: var(--brand-50);
  --badge-brand-fg: var(--brand-700);
  --badge-brand-border: var(--brand-200);
  --badge-success-bg: var(--success-50);
  --badge-success-fg: var(--success-700);
  --badge-success-border: var(--success-200);
  --badge-warning-bg: var(--warning-50);
  --badge-warning-fg: var(--warning-700);
  --badge-warning-border: var(--warning-200);
  --badge-error-bg: var(--error-50);
  --badge-error-fg: var(--error-700);
  --badge-error-border: var(--error-200);

  --indicator-online: var(--success-500);
  --indicator-offline: var(--gray-400);

  /* ---------------------------------------------------------------- own additions (--pe-), derived */
  --pe-info-50: var(--brand-50);
  --pe-info-500: var(--brand-500);
  --pe-info-700: var(--brand-700);

  --pe-status-ok: var(--indicator-online);
  --pe-status-degraded: var(--color-fg-warning-primary);
  --pe-status-critical: var(--color-fg-error-primary);
  --pe-status-offline: var(--indicator-offline);
  --pe-status-unknown: var(--color-fg-secondary);
  --pe-status-paused: var(--color-fg-brand-primary);

  --pe-focus-shadow: var(--ring-brand);
  --pe-focus-width: 2px;
  --pe-focus-offset: 2px;
  --pe-border-width: 1px;
  --pe-underline-offset: 0.15em;
  --pe-letter-spacing-caps: 0.04em;
  --pe-letter-spacing-code: 0.06em;

  --pe-duration-fast: 120ms;
  --pe-duration-normal: 200ms;
  --pe-easing-standard: cubic-bezier(0.2, 0, 0, 1);

  --pe-z-header: 100;
  --pe-z-overlay: 200;
  --pe-z-toast: 300;

  --pe-content-max: 90rem;
  --pe-sidebar-width: 15.5rem;
  --pe-control-height: 2.25rem;
  --pe-control-height-sm: 1.875rem;
  --pe-header-height: 3.5rem;
  --pe-measure: 48rem;
  --pe-field-max: 36rem;
  --pe-narrow-max: 32rem;
  --pe-tile-min: 15rem;
  --pe-icon-size: 1rem;
  --pe-icon-size-lg: 2rem;
  --pe-dot-size: 0.5rem;
  --pe-sparkline-width: 6rem;
  --pe-sparkline-height: 1.5rem;
  --pe-sparkline-stroke: 1.5;
  --pe-scroll-max: 24rem;
  --pe-truncate-max: 18rem;

  --pe-surface-page: var(--color-bg-secondary);
  --pe-surface-card: var(--color-bg-primary);
  --pe-surface-code: var(--color-bg-secondary);
  --pe-surface-header: var(--color-bg-primary);
  --pe-surface-sidebar: var(--color-bg-primary);
  --pe-link: var(--color-text-brand-primary);
  --pe-link-hover: var(--color-text-primary);
  --pe-diff-add-bg: var(--color-bg-success-subtle);
  --pe-diff-remove-bg: var(--color-bg-error-subtle);
}