/* SCS design tokens. Every application color, radius, size and shadow comes
   from here; components.css maps the older variable names onto these tokens.
   Diagram content keeps its own authored colors and is not themed. */
:root {
  color-scheme: light;

  /* Surfaces, from page background to raised controls */
  --scs-bg: #f3f5f7;
  --scs-surface: #ffffff;
  --scs-surface-2: #f7f9fa;
  --scs-surface-3: #eef2f5;
  --scs-overlay: rgba(16, 32, 44, 0.45);

  /* Text */
  --scs-ink: #1b2a36;
  --scs-ink-2: #465867;
  --scs-ink-3: #5e6f7c;
  --scs-ink-disabled: #a3afb9;

  /* Lines */
  --scs-line: #d8dfe5;
  --scs-line-2: #e7ecf0;
  --scs-line-strong: #b9c5ce;
  --scs-row-alt: #f0f4f7;
  --scs-row-hover: #e9f3f5;

  /* Brand petrol for actions, selection and focus */
  --scs-accent: #0e7280;
  --scs-accent-hover: #0b5f6b;
  --scs-accent-ink: #ffffff;
  --scs-accent-soft: #e4f1f3;
  --scs-accent-line: #9cc9cf;
  --scs-focus: #1590a0;

  /* State colors, never used as decoration */
  --scs-danger: #b42318;
  --scs-danger-soft: #fdeceb;
  --scs-danger-line: #efb9b3;
  --scs-warn: #8f5a06;
  --scs-warn-soft: #fcf1dc;
  --scs-warn-line: #ecd09b;
  --scs-ok: #1d7446;
  --scs-ok-soft: #e3f3e9;
  --scs-ok-line: #a8d5b9;
  --scs-danger-ink: #ffffff;
  /* 6.6: text on fixed authored colours (people in a live mind map, mind map centre), both themes. */
  --scs-person-ink: #ffffff;

  /* Model object kinds in the matrix, impact graph and object chips */
  --scs-kind-requirement: #7c4dbe;
  --scs-kind-usecase: #b03c72;
  --scs-kind-system: #2563c9;
  --scs-kind-function: #0f8a6e;
  --scs-kind-interface: #c46a10;
  --scs-kind-element: #56677d;
  --scs-kind-diagram: #7a8594;
  /* Benutzerrollen (6.11): olive, round everywhere */
  --scs-kind-role: #5e7a1f;
  --scs-kind-role-soft: #eef3dc;
  --scs-kind-role-line: #c9d6a3;
  --scs-kind-role-ink: #3f5512;
  /* Status and tag colours (5.0) */
  --scs-label-grey: #6b7785;
  --scs-label-blue: #2563c9;
  --scs-label-teal: #0f8a8a;
  --scs-label-green: #1d7446;
  --scs-label-yellow: #9a6b00;
  --scs-label-orange: #c25a0c;
  --scs-label-red: #b42318;
  --scs-label-purple: #7c4dbe;
  --scs-label-pink: #b03c72;
  --scs-label-petrol: #0e7280;

  /* Navigation stays dark in both themes */
  /* 7.1 menu group colours (on the dark navigation, so one set serves both themes),
     taken from the diagram colours: Diagramme teal, Spezifikation violet, Architektur blue,
     Produkt & Varianten green, Analyse coral, Notizen & Skizzen ochre, Stammdaten slate. */
  --scs-menu-diagrams: #68c5c8;
  --scs-menu-specification: #b9a2ef;
  --scs-menu-architecture: #86b0f2;
  --scs-menu-product: #a3d28f;
  --scs-menu-analysis: #efab90;
  --scs-menu-notes: #e2c27a;
  --scs-menu-master-data: #a9b4c2;
  --scs-nav: #14303f;
  --scs-nav-2: #1d3e50;
  --scs-nav-3: #275063;
  --scs-nav-line: #2c4b5d;
  --scs-nav-ink: #e3edf3;
  --scs-nav-ink-2: #a9c0cf;
  --scs-nav-ink-3: #7f9cae;

  /* Type */
  --scs-font: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --scs-font-mono: 'Cascadia Mono', Consolas, 'SF Mono', ui-monospace, monospace;
  --scs-text-xs: 11px;
  --scs-text-s: 12px;
  --scs-text-m: 13px;
  --scs-text-l: 15px;
  --scs-text-xl: 19px;
  --scs-text-xxl: 24px;

  /* Shape and depth */
  --scs-radius-s: 4px;
  --scs-radius-m: 6px;
  --scs-radius-l: 8px;
  --scs-control-h: 32px;
  --scs-control-h-s: 28px;
  --scs-shadow-1: 0 1px 2px rgba(16, 35, 48, 0.06);
  --scs-shadow-pop: 0 16px 40px -12px rgba(16, 35, 48, 0.32), 0 2px 6px rgba(16, 35, 48, 0.08);

  /* Spacing scale */
  --scs-space-1: 4px;
  --scs-space-2: 8px;
  --scs-space-3: 12px;
  --scs-space-4: 16px;
  --scs-space-5: 24px;
  --scs-space-6: 32px;
}

html[data-theme='dark'] {
  color-scheme: dark;
  --scs-bg: #0e1a22;
  --scs-surface: #15232d;
  --scs-surface-2: #192a35;
  --scs-surface-3: #20323e;
  --scs-overlay: rgba(2, 8, 12, 0.6);
  --scs-ink: #e1e9ef;
  --scs-ink-2: #b0c0cc;
  --scs-ink-3: #8597a5;
  --scs-ink-disabled: #566977;
  --scs-line: #2a3d4a;
  --scs-line-2: #213340;
  --scs-line-strong: #3d5465;
  --scs-row-alt: #1c303c;
  --scs-row-hover: #1d3842;
  --scs-accent: #4db4bc;
  --scs-accent-hover: #6cc5cb;
  --scs-accent-ink: #062024;
  --scs-accent-soft: #15333a;
  --scs-accent-line: #2d636a;
  --scs-focus: #70d4dc;
  --scs-danger: #f2877c;
  --scs-danger-soft: #3a1d1b;
  --scs-danger-line: #7a3a34;
  --scs-warn: #e8b65c;
  --scs-warn-soft: #33270f;
  --scs-warn-line: #6b5223;
  --scs-ok: #66c58f;
  --scs-ok-soft: #142f21;
  --scs-ok-line: #2d6143;
  --scs-kind-requirement: #b493ef;
  --scs-kind-usecase: #ef8fbb;
  --scs-kind-system: #77a7f3;
  --scs-kind-function: #4cc7a6;
  --scs-kind-interface: #f0a45a;
  --scs-kind-element: #9fb0c5;
  --scs-kind-diagram: #a3adba;
  --scs-kind-role: #a9c46a;
  --scs-kind-role-soft: #262f14;
  --scs-kind-role-line: #4b5a24;
  --scs-kind-role-ink: #c9dd94;
  --scs-label-grey: #a3afbb;
  --scs-label-blue: #77a7f3;
  --scs-label-teal: #4cc7c7;
  --scs-label-green: #66c58f;
  --scs-label-yellow: #e8c25c;
  --scs-label-orange: #f0a45a;
  --scs-label-red: #f2877c;
  --scs-label-purple: #b493ef;
  --scs-label-pink: #ef8fbb;
  --scs-label-petrol: #4db4bc;
  --scs-nav: #0a151c;
  --scs-nav-2: #13242e;
  --scs-nav-3: #1b3340;
  --scs-nav-line: #1f3441;
  --scs-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --scs-shadow-pop: 0 18px 44px -12px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Paper (6.6 Modelldokumente): the document preview stays a white sheet in every theme,
   like the exported PDF and Word file. */
:root {
  --scs-paper: #ffffff;
  --scs-paper-ink: #1d2733;
  --scs-paper-head: #12324a;
  --scs-paper-muted: #4b5c6b;
  --scs-paper-note: #6a7884;
  --scs-paper-line: #b9c3cc;
  --scs-paper-th: #e8eef3;
  --scs-paper-key: #f3f6f8;
  --scs-paper-figure: #f5f8fa;
  --scs-paper-figure-line: #9fb0bf;
  /* Preview hints (6.8): visible while editing, never exported. */
  --scs-paper-hint: #fdf0d2;
  --scs-paper-hint-line: #dcb35c;
}