/* ESG Pro Check – Design-System-Tokens (offizieller ProCheck-Handoff)
   Rot #C20000 ist reiner Akzent · Anthrazit/Weiß-Kanvas · Core Sans A · macOS-Feeling.
   Reihenfolge: colors, typography, spacing (inkl. Radius/Schatten/Motion). */


/* ===== colors ===== */
/* ESG ProCheck — Color tokens
 * Elevated "Apple-grade" system: ~92% neutral, ~6% grayscale accent, ~2% CI-Rot.
 * CI-Rot #C20000 is a premium ACCENT — never a red interface.
 * Light + dark scopes; components read the semantic aliases so both themes flip.
 */

:root, [data-theme="light"] {
  /* ---- Brand: CI-Rot (accent only) ---- */
  --esg-red: #C20000;            /* rgb(194,0,0) — primary accent */
  --esg-red-hover: #A80000;
  --esg-red-active: #8F0000;
  --esg-red-soft: #FBEAEA;       /* tinted surface behind red content */
  --esg-red-border: #F1CBCB;
  --esg-red-tint-05: rgba(194, 0, 0, 0.05);   /* hover wash */
  --esg-red-tint-10: rgba(194, 0, 0, 0.10);   /* selected wash */

  /* ---- Neutral ramp (surfaces darken · ink lightens under dark) ---- */
  --esg-white: #FFFFFF;
  --esg-gray-50:  #FAFAFB;       /* app background */
  --esg-gray-100: #F4F5F7;       /* secondary background / subtle fill */
  --esg-gray-150: #EFF0F2;       /* hairline / table stripe */
  --esg-gray-200: #E8EAED;       /* default border */
  --esg-gray-300: #DADCE0;       /* strong border / divider */
  --esg-gray-400: #9AA0A6;       /* placeholder */
  --esg-gray-500: #80868B;       /* muted labels */
  --esg-body: #5F6368;           /* secondary text / Fließtext */
  --esg-ink: #111111;            /* primary text / headings */
  --esg-black: #000000;

  /* ---- Semantic status ---- */
  --esg-success: #22C55E;
  --esg-success-soft: #E9F9EF;
  --esg-success-border: #BCEBCC;
  --esg-warning: #F59E0B;
  --esg-warning-soft: #FEF3E2;
  --esg-warning-border: #F6DDA9;
  --esg-danger: #DC2626;
  --esg-danger-soft: #FCEBEB;
  --esg-danger-border: #F5C6C6;
  --esg-info: #3B82F6;
  --esg-info-soft: #E9F1FE;
  --esg-info-border: #C3D9FB;

  /* ---- Semantic surfaces ---- */
  --surface-app: #FAFAFB;
  --surface-secondary: #F4F5F7;
  --surface-card: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-sunken: #F4F5F7;
  --surface-sidebar: #FBFBFC;
  --surface-inverse: #111111;
  --surface-hover: var(--esg-red-tint-05);
  --surface-hover-neutral: #F4F5F7;
  --surface-selected: var(--esg-red-tint-10);
  --avatar-bg: #111111;
  --avatar-fg: #FFFFFF;

  /* ---- Semantic text ---- */
  --text-strong: #111111;
  --text-heading: #111111;
  --text-body: #5F6368;
  --text-muted: #80868B;
  --text-placeholder: #9AA0A6;
  --text-on-accent: #FFFFFF;
  --text-accent: #C20000;
  --text-link: #C20000;

  /* ---- Borders ---- */
  --border-subtle: #EFF0F2;
  --border-default: #E8EAED;
  --border-strong: #DADCE0;
  --border-focus: #C20000;
  --focus-ring: 0 0 0 3px rgba(194, 0, 0, 0.16);

  /* ---- Glass (frosted panels: nav, dialogs, overlays, command palette) ---- */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-strong: rgba(255, 255, 255, 0.86);
  --glass-blur: saturate(180%) blur(20px);  /* @kind other */
  --glass-border: rgba(17, 17, 17, 0.07);
  --glass-highlight: rgba(255, 255, 255, 0.6);
  --scrim: rgba(17, 17, 20, 0.28);
}

/* ============================================================
 * DARK MODE — macOS Sonoma feel. Applies via [data-theme="dark"].
 * ============================================================ */
[data-theme="dark"] {
  --esg-red: #C20000;
  --esg-red-hover: #D31414;
  --esg-red-active: #E22B2B;
  --esg-red-soft: rgba(255, 90, 90, 0.14);
  --esg-red-border: rgba(255, 90, 90, 0.28);
  --esg-red-tint-05: rgba(255, 90, 90, 0.08);
  --esg-red-tint-10: rgba(255, 90, 90, 0.16);

  /* ramp: surfaces → dark, ink → light */
  --esg-white: #242426;
  --esg-gray-50:  #1C1C1E;
  --esg-gray-100: #2A2A2C;
  --esg-gray-150: #303032;
  --esg-gray-200: rgba(255, 255, 255, 0.11);
  --esg-gray-300: rgba(255, 255, 255, 0.18);
  --esg-gray-400: #7C7C82;
  --esg-gray-500: #98989D;
  --esg-body: #C6C6CB;
  --esg-ink: #F5F5F7;
  --esg-black: #FFFFFF;

  --esg-success-soft: rgba(34, 197, 94, 0.16);
  --esg-success-border: rgba(34, 197, 94, 0.32);
  --esg-warning-soft: rgba(245, 158, 11, 0.16);
  --esg-warning-border: rgba(245, 158, 11, 0.32);
  --esg-danger-soft: rgba(220, 38, 38, 0.18);
  --esg-danger-border: rgba(220, 38, 38, 0.34);
  --esg-info-soft: rgba(59, 130, 246, 0.16);
  --esg-info-border: rgba(59, 130, 246, 0.34);

  --surface-app: #161618;
  --surface-secondary: #1C1C1E;
  --surface-card: #242426;
  --surface-raised: #2A2A2C;
  --surface-sunken: #1C1C1E;
  --surface-sidebar: #191919;
  --surface-inverse: #F5F5F7;
  --surface-hover: rgba(255, 255, 255, 0.06);
  --surface-hover-neutral: rgba(255, 255, 255, 0.05);
  --surface-selected: rgba(255, 90, 90, 0.16);
  --avatar-bg: #3A3A3D;
  --avatar-fg: #F5F5F7;

  --text-strong: #FFFFFF;
  --text-heading: #F5F5F7;
  --text-body: #C6C6CB;
  --text-muted: #98989D;
  --text-placeholder: #7C7C82;
  --text-on-accent: #FFFFFF;
  --text-accent: #FF6B6B;
  --text-link: #FF6B6B;

  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-default: rgba(255, 255, 255, 0.11);
  --border-strong: rgba(255, 255, 255, 0.18);
  --border-focus: #FF6B6B;
  --focus-ring: 0 0 0 3px rgba(255, 90, 90, 0.22);

  --glass-bg: rgba(30, 30, 33, 0.68);
  --glass-bg-strong: rgba(30, 30, 33, 0.85);
  --glass-blur: saturate(180%) blur(20px);  /* @kind other */
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-highlight: rgba(255, 255, 255, 0.06);
  --scrim: rgba(0, 0, 0, 0.5);
}

/* ===== typography ===== */
/* ESG ProCheck — Typography tokens
 * Core Sans A. Headings favour uppercase (Versalien) with open tracking,
 * per CD-Manual. UI/body uses mixed case for legibility & speed.
 */

:root {
  --font-sans: "Core Sans A", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;

  /* Weights map to the four supplied Core Sans A cuts */
  --fw-light: 300;      /* @kind other */    /* 35 Light  */
  --fw-medium: 500;     /* @kind other */    /* 55 Medium — default UI text */
  --fw-bold: 700;       /* @kind other */    /* 65 Bold   */
  --fw-extrabold: 800;  /* @kind other */    /* 75 ExtraBold — display / headlines */

  /* Type scale (px) — desktop-first, tuned for dense pro tooling */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;      /* base UI size */
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --text-3xl: 28px;
  --text-4xl: 36px;
  --text-5xl: 48px;

  /* Line heights */
  --lh-tight: 1.15;    /* @kind other */
  --lh-snug: 1.3;      /* @kind other */
  --lh-normal: 1.5;    /* @kind other */
  --lh-relaxed: 1.65;  /* @kind other */

  /* Letter spacing — headlines open up, uppercase labels most of all */
  --ls-display: -0.01em; /* @kind other */
  --ls-normal: 0;        /* @kind other */
  --ls-label: 0.02em;    /* @kind other */
  --ls-caps: 0.08em;     /* @kind other */    /* uppercase eyebrows */

  /* Semantic roles */
  --font-display: var(--fw-extrabold) var(--text-4xl)/var(--lh-tight) var(--font-sans);
  --font-h1: var(--fw-extrabold) var(--text-3xl)/var(--lh-tight) var(--font-sans);
  --font-h2: var(--fw-bold) var(--text-2xl)/var(--lh-snug) var(--font-sans);
  --font-h3: var(--fw-bold) var(--text-lg)/var(--lh-snug) var(--font-sans);
  --font-body: var(--fw-medium) var(--text-md)/var(--lh-normal) var(--font-sans);
  --font-body-sm: var(--fw-medium) var(--text-sm)/var(--lh-normal) var(--font-sans);
  --font-label: var(--fw-bold) var(--text-xs)/var(--lh-snug) var(--font-sans);
}

/* ===== spacing ===== */
/* ESG ProCheck — Spacing, radius, shadow, motion, z-index tokens */

:root {
  /* ---- Spacing (4px base grid) ---- */
  --sp-0: 0;   /* @kind spacing */
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 12px;
  --sp-6: 16px;
  --sp-7: 20px;
  --sp-8: 24px;
  --sp-9: 32px;
  --sp-10: 40px;
  --sp-11: 48px;
  --sp-12: 64px;
  --sp-13: 80px;
  --sp-14: 96px;

  /* ---- Radius (Apple-grade: buttons/inputs 12 · cards 16 · KPI 20 · dialogs 24) ---- */
  --radius-xs: 8px;      /* chips, badges */
  --radius-sm: 10px;     /* small controls, menu items */
  --radius-md: 12px;     /* buttons, inputs, selects */
  --radius-lg: 16px;     /* cards, panels */
  --radius-xl: 20px;     /* large KPI cards, sheets */
  --radius-2xl: 24px;    /* dialogs, modals, command palette */
  --radius-full: 999px;

  /* ---- Shadows — very soft, multi-layer, elegant depth (no harsh edges) ---- */
  --shadow-xs: 0 1px 2px rgba(17, 17, 17, 0.04);
  --shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.04), 0 1px 3px rgba(17, 17, 17, 0.03);
  --shadow-card: 0 1px 2px rgba(17, 17, 17, 0.04), 0 4px 16px rgba(17, 17, 17, 0.04);
  --shadow-md: 0 2px 6px rgba(17, 17, 17, 0.04), 0 8px 24px rgba(17, 17, 17, 0.06);
  --shadow-lg: 0 4px 12px rgba(17, 17, 17, 0.05), 0 16px 40px rgba(17, 17, 17, 0.08);
  --shadow-xl: 0 8px 24px rgba(17, 17, 17, 0.06), 0 32px 64px rgba(17, 17, 17, 0.12);
  --shadow-ring: inset 0 0 0 1px rgba(17, 17, 17, 0.05);

  /* ---- Motion — quick, precise, no bounce ---- */
  /* ---- Motion — invisible, Apple-like easing; quick & precise, never bouncy ---- */
  --ease-standard: cubic-bezier(0.32, 0.72, 0, 1);  /* @kind other */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);       /* @kind other */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);            /* @kind other */
  --dur-fast: 130ms;   /* @kind other */
  --dur-base: 200ms;   /* @kind other */
  --dur-slow: 260ms;   /* @kind other */

  /* ---- Z-index scale ---- */
  --z-base: 0;         /* @kind other */
  --z-sticky: 100;     /* @kind other */
  --z-dropdown: 400;   /* @kind other */
  --z-overlay: 800;    /* @kind other */
  --z-modal: 900;      /* @kind other */
  --z-toast: 1000;     /* @kind other */
  --z-tooltip: 1100;   /* @kind other */

  /* ---- Layout ---- */
  --sidebar-w: 256px;
  --sidebar-w-collapsed: 68px;
  --topbar-h: 64px;
  --content-max: 1280px;
}