/* =============================================================
   Di-Solution Design System — colors_and_type.css
   Source of truth: uploads/Styleguide_Di_Solution.pdf
   ============================================================= */

/* ── Fonts ──────────────────────────────────────────────────── */
@font-face { font-family: 'Barlow'; font-style: normal;  font-weight: 400; src: url('/assets/fonts/Barlow-Regular.ttf')        format('truetype'); }
@font-face { font-family: 'Barlow'; font-style: italic;  font-weight: 400; src: url('/assets/fonts/Barlow-Italic.ttf')         format('truetype'); }
@font-face { font-family: 'Barlow'; font-style: normal;  font-weight: 500; src: url('/assets/fonts/Barlow-Medium.ttf')         format('truetype'); }
@font-face { font-family: 'Barlow'; font-style: normal;  font-weight: 600; src: url('/assets/fonts/Barlow-SemiBold.ttf')       format('truetype'); }
@font-face { font-family: 'Barlow'; font-style: normal;  font-weight: 700; src: url('/assets/fonts/Barlow-Bold.ttf')           format('truetype'); }

:root {
  /* =========================================================
     BRAND COLORS — Hausfarben (House Colors)
     Three tones; PDF page 21.
     ========================================================= */

  /* Primärfarbe — Dunkelblau (replaces black) */
  --dis-dunkelblau:        #030A26;          /* R3  G10 B38   — primary, type/logo/icons */
  --dis-dunkelblau-50:     #818594;          /* 50% tint */
  --dis-dunkelblau-30:     #b4b6bf;          /* 30% tint */
  --dis-dunkelblau-15:     #d9dade;          /* 15% tint */

  /* Highlightfarbe — Leuchtgelb (signal color, attention) */
  --dis-leuchtgelb:        #FFFF47;          /* R255 G255 B71 */
  --dis-leuchtgelb-50:     #FFFFA3;
  --dis-leuchtgelb-30:     #FFFFC4;
  --dis-leuchtgelb-15:     #FFFFE1;

  /* Sekundärfarbe — Beige (replaces white) */
  --dis-beige:             #E3E3D9;          /* R227 G227 B217 */
  --dis-beige-50:          #F1F1EC;
  --dis-beige-30:          #F6F6F2;
  --dis-beige-15:          #FAFAF8;
  --dis-beige-deep:        #D7D7CC;          /* slightly darker variant for hovers */

  /* Pure white & black exist only when truly needed */
  --dis-white:             #FFFFFF;
  --dis-black:             #000000;

  /* =========================================================
     SEMANTIC TOKENS — light surface (beige theme)
     ========================================================= */
  --bg:                    var(--dis-beige);
  --bg-elev:               var(--dis-beige-50);
  --bg-sunken:             var(--dis-beige-deep);
  --bg-invert:             var(--dis-dunkelblau);

  --fg:                    var(--dis-dunkelblau);
  --fg-muted:              var(--dis-dunkelblau-50);
  --fg-subtle:             var(--dis-dunkelblau-30);
  --fg-invert:             var(--dis-beige);
  --fg-on-yellow:          var(--dis-dunkelblau);
  --fg-on-blue:            var(--dis-beige);

  --accent:                var(--dis-leuchtgelb);
  --accent-fg:             var(--dis-dunkelblau);

  --border:                var(--dis-dunkelblau);            /* lines/strokes always solid dunkelblau */
  --border-soft:           var(--dis-dunkelblau-15);
  --rule:                  var(--dis-dunkelblau);            /* hairlines */

  /* Status (kept neutral — brand has no defined semantic colors) */
  --success:               #1F7A4B;
  --warning:               var(--dis-leuchtgelb);
  --danger:                #B33A2A;
  --info:                  #2B5BA8;

  /* =========================================================
     TYPOGRAPHY
     ========================================================= */
  --font-sans:             'Barlow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display:          'Barlow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* Logo wordmark is Objektiv Mk2 Bold — restricted to logo lockups; we use Barlow Black/Bold w/ tight tracking as the editorial display stand-in. */

  /* Weights */
  --fw-thin:   100;   /* @kind font */
  --fw-light:  300;   /* @kind font */
  --fw-regular:400;   /* @kind font */
  --fw-medium: 500;   /* @kind font */
  --fw-semi:   600;   /* @kind font */
  --fw-bold:   700;   /* @kind font */
  --fw-xbold:  800;   /* @kind font */
  --fw-black:  900;   /* @kind font */

  /* Type scale — based on Barlow at 16px body */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-md:    16px;     /* Fließtext / body */
  --fs-lg:    18px;
  --fs-xl:    22px;
  --fs-2xl:   28px;
  --fs-3xl:   36px;
  --fs-4xl:   48px;
  --fs-5xl:   64px;
  --fs-6xl:   88px;
  --fs-7xl:   120px;

  /* Line heights — Barlow Regular gets +2pt extra leading per styleguide */
  --lh-tight:  1.05;     /* @kind font */
  --lh-snug:   1.2;      /* @kind font */
  --lh-body:   1.55;     /* @kind font */
  --lh-loose:  1.75;     /* @kind font */

  /* Letter-spacing — headlines per styleguide use "Laufweite 50" (50 thousandths em) */
  --ls-headline: 0.05em;   /* @kind font */
  --ls-eyebrow:  0.18em;   /* @kind font */
  --ls-caps:     0.08em;   /* @kind font */
  --ls-tight:   -0.01em;   /* @kind font */

  /* =========================================================
     SPACING — 4px base
     ========================================================= */
  --sp-0:   0;        /* @kind spacing */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10:  128px;
  --sp-11:  192px;

  /* =========================================================
     RADII — brand favors sharp corners; lines are "gradlinig" (straight).
     Rounding is reserved for the circular Arrow-Round element & avatars.
     ========================================================= */
  --r-0:    0;        /* @kind radius */
  --r-1:    2px;
  --r-2:    4px;        /* default for inputs/buttons */
  --r-3:    8px;        /* cards (use sparingly) */
  --pill:   999px;
  --circle: 50%;

  /* =========================================================
     LINES & STROKES — match logo stroke; no curves on layout lines.
     ========================================================= */
  --stroke-hair:    1px;       /* @kind other */
  --stroke-line:    2px;       /* @kind other */
  --stroke-bold:    3px;       /* @kind other */
  --stroke-display: 4px;       /* arrows, dividers, big elements @kind other */

  /* =========================================================
     SHADOWS — brand is flat; shadows are minimal & cool-blue.
     ========================================================= */
  --shadow-0:   none;
  --shadow-1:   0 1px 2px rgba(3,10,38,0.06);
  --shadow-2:   0 4px 14px rgba(3,10,38,0.08);
  --shadow-3:   0 12px 32px rgba(3,10,38,0.12);
  --shadow-focus: 0 0 0 3px rgba(255,255,71,0.55);  /* yellow focus ring */

  /* =========================================================
     MOTION
     ========================================================= */
  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);     /* @kind other */
  --ease-in:   cubic-bezier(0.6, 0, 0.8, 0.2);     /* @kind other */
  --ease-inout:cubic-bezier(0.65, 0, 0.35, 1);     /* @kind other */
  --dur-fast:  120ms;     /* @kind other */
  --dur-med:   220ms;     /* @kind other */
  --dur-slow:  420ms;     /* @kind other */

  /* =========================================================
     LAYOUT
     ========================================================= */
  --container:  1240px;
  --container-narrow: 880px;
  --gutter:     32px;
}

/* =========================================================
   INVERTED THEME — Dunkelblau surface (when design is "invertiert")
   Apply class .dis-invert on a wrapper.
   ========================================================= */
.dis-invert {
  --bg:        var(--dis-dunkelblau);
  --bg-elev:   #0a1238;
  --bg-sunken: #020616;
  --bg-invert: var(--dis-beige);
  --fg:        var(--dis-beige);
  --fg-muted:  var(--dis-dunkelblau-30);
  --fg-subtle: var(--dis-dunkelblau-50);
  --fg-invert: var(--dis-dunkelblau);
  --border:    var(--dis-beige);
  --border-soft: rgba(227,227,217,0.18);
  --accent-fg: var(--dis-dunkelblau);
}

/* =========================================================
   BASE TYPOGRAPHY
   ========================================================= */
html { font-family: var(--font-sans); color: var(--fg); background: var(--bg); }
body { font-size: var(--fs-md); line-height: var(--lh-body); font-weight: var(--fw-regular); }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-headline);
  text-transform: uppercase;
  color: var(--fg);
  margin: 0 0 var(--sp-5);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-headline);
  text-transform: uppercase;
  margin: 0 0 var(--sp-4);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-headline);
  text-transform: uppercase;
  margin: 0 0 var(--sp-4);
}
h4, .h4 {
  font-weight: var(--fw-medium);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  margin: 0 0 var(--sp-3);
}
.subline {
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--fs-lg);
  letter-spacing: 0.02em;
  color: var(--fg-muted);
}
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg);
}
p, .body {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}
.lead {
  font-size: var(--fs-lg);
  line-height: 1.5;
  font-weight: var(--fw-regular);
}
em, i, .accent-text {
  font-style: italic;
  font-weight: var(--fw-regular);    /* Auszeichnungsschrift — Barlow Italic */
}
strong, b {
  font-weight: var(--fw-medium);     /* Barlow Medium for emphasis per guide */
}
small, .caption {
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  color: var(--fg-muted);
}

a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--fg); padding-bottom: 1px; transition: opacity var(--dur-fast); }
a:hover { opacity: 0.65; }

::selection { background: var(--dis-leuchtgelb); color: var(--dis-dunkelblau); }