/*
 * 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 here are those of the theme "neutral" (own values, nothing taken from elsewhere): light mode on
 * :root is the base of every theme and the fallback for any name a theme leaves out. This file registers every
 * token name; a theme file can only set names that exist here (checked by a test).
 *
 * The themes themselves live in themes/: themes/momentum-bronze.css (the default) and themes/neutral.css set
 * light and dark mode. A theme file may also carry the @font-face rules of its own fonts, so a theme without
 * fonts never loads a font file.
 */

: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;
  /* display serif (brand name, empty states); neutral has no serif of its own */
  --font-family-serif: var(--font-family);
  --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;
  /* cards */
  --radius-xl: 1rem;
  --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;

  /* the dark grey ramp of Momentum; neutral has one grey ramp for both modes */
  --gray-dark-25: var(--gray-25);
  --gray-dark-50: var(--gray-50);
  --gray-dark-100: var(--gray-100);
  --gray-dark-200: var(--gray-200);
  --gray-dark-300: var(--gray-300);
  --gray-dark-400: var(--gray-400);
  --gray-dark-500: var(--gray-500);
  --gray-dark-600: var(--gray-600);
  --gray-dark-700: var(--gray-700);
  --gray-dark-800: var(--gray-800);
  --gray-dark-900: var(--gray-900);
  --gray-dark-950: var(--gray-950);

  /* ---------------------------------------------------------------- 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-quaternary: var(--gray-200);
  --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);
  /* page background image and the translucent header; neutral: none and the plain surface */
  --color-bg-gradient: none;
  --color-bg-glass: var(--color-bg-primary);

  --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);
  /* quiet buttons and menu entries without a frame */
  --button-tertiary-bg: transparent;
  --button-tertiary-bg-hover: var(--color-bg-tertiary);
  --button-tertiary-fg: var(--color-text-secondary);

  --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: 80rem;
  /* the one height of a text field, a select and a button in a form row, and the small one of the compact
     rows of the simulator; the padding above and below one line of text (--leading-sm) follows from it */
  --pe-control-height: 2.375rem;
  --pe-control-height-sm: 1.875rem;
  --pe-control-pad-block: calc((var(--pe-control-height) - var(--leading-sm)) / 2 - var(--pe-border-width));
  --pe-control-pad-block-sm: calc((var(--pe-control-height-sm) - var(--leading-sm)) / 2 - var(--pe-border-width));
  /* how high a badge is: its line, its padding above and below and its frame */
  --pe-badge-height: calc(var(--leading-xs) + 2 * var(--spacing-xxs) + 2 * var(--pe-border-width));
  /* half the width of the chevron of a select (it is drawn from two squares of this size) */
  --pe-select-arrow: 0.3125rem;
  --pe-header-height: 3.5rem;
  /* only the header sticks to the top (one row from 48em up): anchors and the skip link land below it with a
     little air (html scroll-padding-top) */
  --pe-sticky-offset: calc(var(--pe-header-height) + var(--pe-border-width) + var(--spacing-xl));
  /* the side menu left of the content (entries of the current section) */
  --pe-sidebar-width: 15rem;
  --pe-measure: 48rem;
  --pe-field-max: 36rem;
  /* the least width of a field of a filter row - the width of a text field by itself: a select of two short
     options and a date field are as wide as the text fields next to them */
  --pe-filter-field-width: 12rem;
  --pe-narrow-max: 32rem;
  --pe-tile-min: 15rem;
  --pe-load-zone-min: 23rem;
  --pe-load-metric-min: 5rem;
  --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;
  /* the station cards of the simulator: narrowest card, width of a small inline field, height of a bar */
  --pe-sim-card-min: 22rem;
  --pe-sim-field-width: 7rem;
  --pe-sim-config-width: 14rem;
  --pe-sim-bar-height: 0.5rem;

  --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-glass);
  /* the side menu; momentum-bronze: the glass of the header */
  --pe-surface-sidebar: var(--color-bg-primary);
  /* hovered and current entry of the side menu: set off from its surface by area, not by a stripe */
  --pe-sidenav-hover-bg: var(--color-bg-tertiary);
  --pe-sidenav-active-bg: var(--color-bg-quaternary);
  --pe-surface-page-image: var(--color-bg-gradient);
  --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);

  /* app frame: accent bar above the header, header backdrop filter, logo and account menu */
  --pe-accent-bar: none;
  --pe-accent-bar-height: 2px;
  --pe-header-backdrop: none;
  --pe-logo-height: 1.375rem;
  --pe-logo-width: calc(var(--pe-logo-height) * 64 / 122.1);
  /* the panel of the account menu (never wider than the window) */
  --pe-menu-width: 19rem;
  --pe-route-node-min: 8rem;
  --pe-route-backend-min: 10rem;
  --pe-route-time-width: 12rem;

  /* the infographic "Energie und Daten" (/server/flow): flows, and the faces of its blocks. Light falls from
     above, so in the dark the top is the brightest face: light-dark() picks by the color-scheme a theme sets.
     The figure shows the wide composition from 54rem of its own width on (container query in components.css). */
  --pe-flow-energy: var(--color-fg-warning-primary);
  --pe-flow-energy-bed: var(--color-bg-quaternary);
  --pe-flow-energy-glow: var(--badge-warning-border);
  --pe-flow-data: var(--color-fg-brand-primary);
  --pe-flow-off: var(--color-text-tertiary);
  --pe-iso-top: light-dark(var(--color-bg-primary), var(--color-bg-quaternary));
  --pe-iso-left: var(--color-bg-tertiary);
  --pe-iso-right: light-dark(var(--color-bg-quaternary), var(--color-bg-secondary));
  --pe-iso-edge: light-dark(var(--color-border-primary), var(--gray-600));
  --pe-iso-plate-top: light-dark(var(--color-bg-secondary), var(--color-bg-tertiary));
  --pe-iso-net-top: var(--color-bg-brand-subtle);
  --pe-iso-own-top: light-dark(var(--brand-50), var(--brand-700));
  --pe-iso-charging: light-dark(var(--warning-300), var(--warning-400));
  --pe-iso-connected: var(--success-400);
  --pe-iso-off: var(--indicator-offline);
  --pe-iso-car: light-dark(var(--gray-300), var(--gray-500));
  --pe-iso-car-side: light-dark(var(--gray-400), var(--gray-600));
  --pe-iso-wheel: light-dark(var(--gray-700), var(--color-bg-primary));
  --pe-flow-wide-max: 72rem;
  --pe-flow-narrow-max: 28rem;

  /* the control room (/leitstand, plan 4.5): the source of a flow and the state of what it shows. Lines and
     symbols take them (3:1 on the card, the page and each colour stop of the page); a state shows as symbol
     and text as well. A stale value is also text (4.5:1). Derived from the semantics, so they follow theme and
     mode without light-dark() (the browser of a panel may be older). The copies (mirrored data) take the tone
     of brand text on its badge: deeper than the load in light mode, paler in dark mode. */
  --pe-src-grid: var(--color-fg-secondary);
  --pe-src-pv: var(--color-fg-warning-primary);
  --pe-src-storage: var(--color-fg-success-primary);
  --pe-src-load: var(--color-fg-brand-primary);
  --pe-src-copy: var(--badge-brand-fg);
  --pe-state-ok: var(--color-fg-success-primary);
  --pe-state-warn: var(--color-fg-warning-primary);
  --pe-state-fault: var(--color-fg-error-primary);
  --pe-state-off: var(--color-text-tertiary);
  --pe-state-stale: var(--color-text-tertiary);
  /* the one period of every moving line of the control room: a level sets its speed by the length of its
     dash pattern alone (areas/leitstand.css), so all lines move in step */
  --pe-lv-period: 1s;
}