/* Self-hosted webfonts — DSGVO-konform, keine externen Verbindungen */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/space-grotesk-300.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/space-grotesk-400.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/space-grotesk-500.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/space-grotesk-600.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/space-grotesk-700.woff2') format('woff2');}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/space-mono-400.woff2') format('woff2');}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/space-mono-700.woff2') format('woff2');}

/* Hahne Digital Assurance — design tokens (bundled) */

/* COLORS — base palette
   Brand primitives from the Hahne Digital Assurance style guide:
     Red   #F04036  (RGB 240 64 54  · CMYK 0 73 78 6)   — primary
     Grey  #636366  (RGB 99 99 102  · CMYK 3 3 0 60)     — neutral
     White #FFFFFF
   Plus the 60% / 20% tints called out in the guide, expanded into
   full scales for UI work. Semantic aliases live in semantic.css. */

:root {
  /* --- Brand red scale (anchored on #F04036) --- */
  --red-50:  #fef3f2;
  --red-100: #fcd9d7;  /* 20% tint (guide) */
  --red-200: #fac0bc;
  --red-300: #f68c86;  /* 60% tint (guide) */
  --red-400: #f4655c;
  --red-500: #f04036;  /* ◆ BRAND RED */
  --red-600: #d62f26;
  --red-700: #b0241d;
  --red-800: #851b15;
  --red-900: #5c120f;

  /* --- Neutral / grey scale (anchored on #636366) --- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f7f7f8;
  --neutral-100: #efeff0;
  --neutral-200: #e0e0e1;  /* ≈ grey 20% tint (guide) */
  --neutral-300: #ceced1;
  --neutral-400: #a1a1a3;  /* ≈ grey 60% tint (guide) */
  --neutral-500: #636366;  /* ◆ BRAND GREY */
  --neutral-600: #4f4f52;
  --neutral-700: #3c3c3e;
  --neutral-800: #29292b;
  --neutral-900: #1a1a1c;
  --neutral-950: #0e0e10;

  /* --- Status palette (muted, harmonised with the brand) --- */
  --green-100: #dcf2e7;
  --green-500: #1f9d6b;   /* assured / compliant / pass */
  --green-700: #157048;

  --amber-100: #fbeccd;
  --amber-500: #e0a030;   /* attention / in progress */
  --amber-700: #a9721a;

  --blue-100:  #dce7f7;
  --blue-500:  #3e6db5;   /* informational */
  --blue-700:  #2b4f86;

  /* danger reuses the brand red (--red-500 / --red-600) */

  /* --- Pure values --- */
  --white: #ffffff;
  --black: #0e0e10;
}


/* TYPOGRAPHY
   Space Grotesk for everything (display + UI + body).
   Space Mono for identifiers, hashes, audit IDs, tabular data.
   Geometric grotesk → tight tracking on large display sizes. */

:root {
  --font-sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-display: var(--font-sans);

  /* Weights — guide calls out Medium + Bold */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Type scale (px) */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  14px;
  --text-base:16px;
  --text-md:  18px;
  --text-lg:  20px;
  --text-xl:  24px;
  --text-2xl: 30px;
  --text-3xl: 38px;
  --text-4xl: 48px;
  --text-5xl: 64px;
  --text-6xl: 82px;

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.12;
  --leading-snug:    1.28;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing — grotesk display tightens, mono/labels open up */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.12em;  /* eyebrow / overline labels */
}


/* SPACING, RADIUS, SIZING, BREAKPOINTS
   4px base grid. Logo clear-space rule from the guide is 1X / 2X,
   expressed via --space-logo-clear (= the icon's own height). */

:root {
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;
  --space-14: 160px;

  /* Border radius — crisp, precise corporate feel */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* Border widths */
  --border-thin: 1px;
  --border-base: 1.5px;
  --border-thick: 2px;

  /* Container widths */
  --container-sm:  640px;
  --container-md:  820px;
  --container-lg:  1080px;
  --container-xl:  1280px;

  /* Control heights */
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;
}


/* ELEVATION — shadows, focus rings, overlays.
   Cool-grey-tinted, soft and restrained. A trust brand keeps shadows
   quiet; depth comes mostly from hairline borders + small lifts. */

:root {
  --shadow-xs: 0 1px 2px rgba(26, 26, 28, 0.06);
  --shadow-sm: 0 1px 2px rgba(26, 26, 28, 0.06),
               0 1px 3px rgba(26, 26, 28, 0.08);
  --shadow-md: 0 2px 4px rgba(26, 26, 28, 0.05),
               0 4px 12px rgba(26, 26, 28, 0.08);
  --shadow-lg: 0 4px 8px rgba(26, 26, 28, 0.05),
               0 12px 28px rgba(26, 26, 28, 0.12);
  --shadow-xl: 0 8px 16px rgba(26, 26, 28, 0.06),
               0 24px 56px rgba(26, 26, 28, 0.16);

  /* Brand-tinted lift — for primary surfaces / hovered red elements */
  --shadow-red: 0 6px 18px rgba(240, 64, 54, 0.28);

  /* Focus ring — accessible, brand red */
  --ring-width: 3px;
  --ring-color: rgba(240, 64, 54, 0.40);
  --ring: 0 0 0 var(--ring-width) var(--ring-color);

  /* Scrim for modals / drawers */
  --overlay-scrim: rgba(14, 14, 16, 0.55);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);   /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* @kind other */
  --duration-fast: 120ms;                        /* @kind other */
  --duration-base: 200ms;                        /* @kind other */
  --duration-slow: 320ms;                        /* @kind other */
}


/* SEMANTIC ALIASES — the layer components & UI kits actually consume.
   Maps brand primitives → roles. Light is the default; [data-theme="dark"]
   re-scopes the same role names for dark surfaces. */

:root,
[data-theme="light"] {
  /* Surfaces */
  --surface-page:    var(--neutral-50);
  --surface-card:    var(--white);
  --surface-sunken:  var(--neutral-100);
  --surface-raised:  var(--white);
  --surface-inverse: var(--neutral-900);
  --surface-tint:    var(--red-50);     /* subtle brand-tinted panel */

  /* Text */
  --text-strong:   var(--neutral-900);
  --text-body:     var(--neutral-700);
  --text-muted:    var(--neutral-500);
  --text-subtle:   var(--neutral-400);
  --text-inverse:  var(--white);
  --text-brand:    var(--red-500);
  --text-on-brand: var(--white);

  /* Borders / dividers */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-brand:   var(--red-500);

  /* Brand action */
  --brand:          var(--red-500);
  --brand-hover:    var(--red-600);
  --brand-active:   var(--red-700);
  --brand-subtle:   var(--red-50);
  --brand-subtle-hover: var(--red-100);

  /* Status — fg (text/icon) + subtle (bg) */
  --status-success:        var(--green-500);
  --status-success-subtle: var(--green-100);
  --status-warning:        var(--amber-500);
  --status-warning-subtle: var(--amber-100);
  --status-danger:         var(--red-500);
  --status-danger-subtle:  var(--red-100);
  --status-info:           var(--blue-500);
  --status-info-subtle:    var(--blue-100);
  --status-neutral:        var(--neutral-500);
  --status-neutral-subtle: var(--neutral-100);

  /* Inputs */
  --field-bg:        var(--white);
  --field-border:    var(--neutral-300);
  --field-placeholder: var(--neutral-400);
}

[data-theme="dark"] {
  --surface-page:    var(--neutral-950);
  --surface-card:    var(--neutral-900);
  --surface-sunken:  #141416;
  --surface-raised:  var(--neutral-800);
  --surface-inverse: var(--neutral-50);
  --surface-tint:    rgba(240, 64, 54, 0.10);

  --text-strong:   var(--neutral-50);
  --text-body:     var(--neutral-300);
  --text-muted:    var(--neutral-400);
  --text-subtle:   var(--neutral-500);
  --text-inverse:  var(--neutral-900);
  --text-brand:    var(--red-400);
  --text-on-brand: var(--white);

  --border-subtle:  var(--neutral-800);
  --border-default: var(--neutral-700);
  --border-strong:  var(--neutral-600);
  --border-brand:   var(--red-500);

  --brand:          var(--red-500);
  --brand-hover:    var(--red-400);
  --brand-active:   var(--red-300);
  --brand-subtle:   rgba(240, 64, 54, 0.14);
  --brand-subtle-hover: rgba(240, 64, 54, 0.22);

  --status-success-subtle: rgba(31, 157, 107, 0.18);
  --status-warning-subtle: rgba(224, 160, 48, 0.18);
  --status-danger-subtle:  rgba(240, 64, 54, 0.18);
  --status-info-subtle:    rgba(62, 109, 181, 0.20);
  --status-neutral-subtle: var(--neutral-800);

  --field-bg:        var(--neutral-800);
  --field-border:    var(--neutral-700);
  --field-placeholder: var(--neutral-500);
}