/*
 * ERPel design tokens — surfaces, typography, spacing, Bulma bridge.
 * Canonical documentation: .cursor/plans/decisions.md → [UI] Design-Tokens & CSS-Module
 */

:root,
[data-theme="light"] {
  --erpel-brand: #7f3030;
  --erpel-brand-h: 0deg;
  --erpel-brand-s: 46%;
  --erpel-brand-l: 34%;

  /* Distinct working palette (brand + cool/neutral accents; avoid muddy browns). */
  --erpel-chart-1: var(--erpel-brand);
  --erpel-chart-2: #4a6fa5;
  --erpel-chart-3: #2a7b88;
  --erpel-chart-4: #3b7a68;
  --erpel-chart-5: #52528c;
  --erpel-chart-6: #c47a2c;
  --erpel-chart-7: #5c6b7a;
  --erpel-chart-8: #8b4d6b;

  /* Chart gradients (charts.js). Set --erpel-chart-gradient: 0 to disable. */
  --erpel-chart-gradient: 1;
  --erpel-chart-gradient-area-top: 0.35;
  --erpel-chart-gradient-area-bottom: 0.02;
  --erpel-chart-gradient-fill-top: 0.95;
  --erpel-chart-gradient-fill-bottom: 0.55;
  /* Treemap: quieter stops (less white/black mix than donut/funnel). */
  --erpel-chart-gradient-tree-top: 0.98;
  --erpel-chart-gradient-tree-bottom: 0.90;

  --erpel-surface: #fff;
  --erpel-surface-muted: #fafafa;
  --erpel-surface-page: #f5f5f5;
  --erpel-surface-subtle: #f7f7f7;
  /* Cards over main watermark — mostly opaque, mark shows through faintly. */
  --erpel-surface-box: color-mix(in srgb, var(--erpel-surface-subtle) 88%, transparent);

  /* Main-area icon watermark (see base.css main.erpel-main::before). */
  --erpel-watermark-opacity: 0.025;
  --erpel-watermark-opacity-empty-search: 1;
  --erpel-watermark-size: min(75vmin, 100%);

  --erpel-border: #dbdbdb;
  --erpel-border-subtle: #ededed;

  --erpel-text: #363636;
  --erpel-text-strong: #1a1a1a;
  --erpel-text-muted: #7a7a7a;

  --erpel-space-1: 0.25rem;
  --erpel-space-2: 0.35rem;
  --erpel-space-3: 0.5rem;
  --erpel-space-4: 0.75rem;
  --erpel-space-5: 1rem;
  --erpel-space-6: 1.25rem;
  /* Main content horizontal inset (full-width layout, no Bulma max-width container). */
  --erpel-page-inline: 5rem;
  /* Bauteile toolbar / empty-search notices: type(12) + query(22) + actions slack. */
  --erpel-bauteile-toolbar-max: min(100%, calc(12rem + 22rem + 14rem));
  /* Vertical tab rail (Konfiguration, Aufträge, Part-Detail); fixed so active bold label does not resize layout. */
  --erpel-rail-width: 14rem;

  --erpel-font-xs: 0.72rem;
  --erpel-font-sm: 0.78rem;
  --erpel-font-md: 0.85rem;
  --erpel-font-base: 0.95rem;
  --erpel-font-lg: 1.05rem;

  /* IBM Plex (self-hosted under static/vendor/ibm-plex/) */
  --erpel-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --erpel-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", "Source Code Pro", monospace;

  --bulma-family-primary: var(--erpel-font-sans);
  --bulma-family-secondary: var(--erpel-font-sans);
  --bulma-family-code: var(--erpel-font-mono);

  /*
   * Semantic font roles — values point at sans or mono stacks.
   * Toggle mono per role in one place, e.g. disable MPN mono:
   *   --erpel-font-role-mpn: var(--erpel-font-sans);
   */
  --erpel-font-role-ui: var(--erpel-font-sans);
  --erpel-font-role-code: var(--erpel-font-mono);
  --erpel-font-role-id: var(--erpel-font-mono);
  --erpel-font-role-mpn: var(--erpel-font-mono);
  --erpel-font-role-metric: var(--erpel-font-mono);
  --erpel-font-role-hash: var(--erpel-font-mono);

  --erpel-nonprod: #f0a030;

  --erpel-warning-bg: #fff3cd;
  --erpel-danger: #c0392b;

  /* Shared corner radius (filter fields, controls, panels). */
  --erpel-radius: 0.4rem;
  /* Room for focus/hover rings at the edge of a clipping scrollport (.erpel-panel-scroll). */
  --erpel-ring-room: 0.3rem;
  /* Floating dropdown panels (tab menu, searchable-select, …). */
  --erpel-dropdown-shadow: 0 0.5rem 1.25rem rgba(10, 10, 10, 0.18);
  --bulma-radius-small: var(--erpel-radius);
  --bulma-radius: var(--erpel-radius);
  --bulma-radius-medium: var(--erpel-radius);
  --bulma-radius-large: var(--erpel-radius);
  /* Button policy: unified radius — not pill-shaped; is-rounded is optional/no-op vs default. */
  --bulma-radius-rounded: var(--erpel-radius);
  /* Bulma `.button` outer shadow. Color variants set a:0 in Bulma — re-enabled in base.css. */
  --erpel-button-outer-shadow-a: 0.025;
  --bulma-button-outer-shadow-a: var(--erpel-button-outer-shadow-a);
  --bulma-card-radius: var(--erpel-radius);
  --bulma-box-radius: var(--erpel-radius);
  --bulma-modal-card-head-radius: var(--erpel-radius);
  --bulma-modal-card-foot-radius: var(--erpel-radius);
  --bulma-navbar-dropdown-radius: var(--erpel-radius);

  /* Table cells/headers: transparent so stripes and panel surface show through. */
  --bulma-table-cell-background-color: transparent;
  --bulma-table-head-background-color: transparent;
  /* Sticky thead must be opaque (see tables.css / detail.css). */
  --erpel-table-head-bg: var(--erpel-surface);

  /* Bulma 1.x CDN defaults to teal; override to ERPelWeb primary */
  --bulma-primary-h: var(--erpel-brand-h);
  --bulma-primary-s: var(--erpel-brand-s);
  --bulma-primary-l: var(--erpel-brand-l);
  --bulma-primary: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
  --bulma-primary-base: var(--bulma-primary);
  --bulma-link-h: var(--erpel-brand-h);
  --bulma-link-s: var(--erpel-brand-s);
  --bulma-link-l: var(--erpel-brand-l);
  --bulma-link: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l));
  --bulma-focus-h: var(--erpel-brand-h);
  --bulma-focus-s: var(--erpel-brand-s);
  --bulma-focus-l: var(--erpel-brand-l);

  /* Neutral palette (formerly hard-coded in module CSS; same values). */
  --erpel-white: #fff;
  --erpel-gray-30: #fcfcfc;
  --erpel-gray-100: #f0f0f0;
  --erpel-gray-170: #e8e8e8;
  --erpel-gray-180: #e5e5e5;
  --erpel-gray-200: #dedede;
  --erpel-gray-350: #bbb;
  --erpel-gray-400: #b5b5b5;
  --erpel-gray-410: #b0b0b0;
  --erpel-gray-500: #888;
  --erpel-gray-600: #666;
  --erpel-gray-700: #4a4a4a;

  /* Semantic tints / text colours. */
  --erpel-brand-dark: #6a2828;
  --erpel-brand-tint: #f6ecec;
  --erpel-brand-tint-strong: #f0e0e0;
  --erpel-danger-border-soft: #f5c6cb;
  --erpel-danger-text: #9b2335;
  --erpel-danger-text-auth: #5c1f1f;
  --erpel-danger-text-table: #a93226;
  --erpel-danger-tint: #fff8f8;
  --erpel-danger-tint-auth: #fde8e8;
  --erpel-info-tint: #eef3fc;
  --erpel-info-text: hsl(207, 61%, 47%);
  --erpel-success-border: #c8e6c9;
  --erpel-success-tint: #f4fdf6;
  --erpel-warning-on-warning: #3b2f00;
  --erpel-warning-text: #7a5b14;
  --erpel-warning-text-strong: #946c00;
  --erpel-warning-tint: #fff4d6;

  /* Alpha overlays (hairlines, shadows, on-dark text). */
  --erpel-black-a5: rgba(0, 0, 0, 0.05);
  --erpel-black-a6: rgba(0, 0, 0, 0.06);
  --erpel-black-a8: rgba(0, 0, 0, 0.08);
  --erpel-black-a12: rgba(0, 0, 0, 0.12);
  --erpel-black-a15: rgba(0, 0, 0, 0.15);
  --erpel-black-a18: rgba(0, 0, 0, 0.18);
  --erpel-black-a30: rgba(0, 0, 0, 0.3);
  --erpel-brand-a28: rgba(127, 48, 48, 0.28);
  --erpel-brand-a34: rgba(127, 48, 48, 0.34);
  --erpel-ink-a8: rgba(10, 10, 10, 0.08);
  --erpel-ink-a10: rgba(10, 10, 10, 0.1);
  --erpel-ink-a12: rgba(10, 10, 10, 0.12);
  --erpel-ink-a14: rgba(10, 10, 10, 0.14);
  --erpel-ink-a15: rgba(10, 10, 10, 0.15);
  --erpel-white-a12: rgba(255, 255, 255, 0.12);
  --erpel-white-a25: rgb(255 255 255 / 25%);
  --erpel-white-a38: rgba(255, 255, 255, 0.38);
  --erpel-white-a82: rgba(255, 255, 255, 0.82);
  --erpel-white-a85: rgb(255 255 255 / 85%);
  --erpel-white-a92: rgb(255 255 255 / 92%);
}