/* ==========================================================================
   trenz.codes — Design-Tokens (Quelle: design-system/tokens/*.css)
   Nicht hier editieren, sondern im Design System — dann synchronisieren.
   Webfont-@font-face kommt aus theme.json (settings.typography.fontFamilies).
   ========================================================================== */

/* ==========================================================================
   trenz.codes — Color tokens
   Dark "blueprint" aesthetic: near-black cool surfaces, a single warm brick
   red (#bf4b4b) as the brand accent, and a cool cyan (#6fc7db) reserved for
   index/marker labels. Restrained: two accents, used sparingly.
   ========================================================================== */
:root {
  /* --- Base neutrals (cool near-black ramp) --- */
  --black-void:   #060708;  /* deepest — footer, page base at rest */
  --black-900:    #0a0b0d;  /* page background */
  --black-850:    #0d0f12;  /* raised / alternate section band */
  --black-800:    #131519;  /* panel */
  --gray-750:     #1b1c1e;  /* card surface (sampled) */
  --gray-700:     #212327;  /* card surface, hover */
  --gray-650:     #2a2c30;  /* hairline-adjacent fill */
  --gray-600:     #34373c;  /* strong border / divider */
  --gray-500:     #52565c;  /* disabled fg, faint icon */
  --gray-400:     #7c8085;  /* muted text */
  --gray-300:     #9a9ea3;  /* body text on dark */
  --gray-200:     #b6b9be;  /* secondary text */
  --gray-100:     #dfe1e4;  /* high-contrast secondary */
  --white:        #ffffff;  /* headlines */
  --off-white:    #f4f5f6;  /* default light text */

  /* --- Brand red (brick) --- */
  --red-bright:   #e8635c;  /* glow / hover highlight */
  --red:          #bf4b4b;  /* PRIMARY BRAND ACCENT */
  --red-600:      #a83f3f;  /* pressed */
  --red-700:      #8f3636;  /* deep */
  --red-tint:     rgba(191, 75, 75, 0.14); /* wash / soft fill */
  --red-glow:     rgba(191, 75, 75, 0.35); /* corner radial glow */

  /* --- Marker cyan (index labels, blueprint accent) --- */
  --cyan:         #6fc7db;
  --cyan-dim:     #4f97a6;
  --cyan-tint:    rgba(111, 199, 219, 0.12);

  /* --- Semantic status --- */
  --success:      #6fbf8a;
  --warning:      #e0b15a;
  --danger:       #d0574f;

  /* ======================================================================
     Semantic aliases — reference these in components, not raw ramp values.
     ====================================================================== */
  --bg-page:        var(--black-900);
  --bg-void:        var(--black-void);
  --bg-raised:      var(--black-850);
  --bg-panel:       var(--black-800);
  --surface-card:   var(--gray-750);
  --surface-hover:  var(--gray-700);

  --border-subtle:  #232529;   /* default hairline on dark */
  --border-strong:  var(--gray-600);
  --border-accent:  var(--red);

  --text-heading:   var(--white);
  --text-body:      var(--gray-300);
  --text-secondary: var(--gray-200);
  --text-muted:     var(--gray-400);
  --text-muted-on-card: var(--gray-300); /* small muted text on card surfaces */
  --text-inverse:   var(--black-900);
  --text-on-accent: #ffffff;

  --accent:         var(--red);
  --accent-hover:   var(--red-bright);
  --accent-press:   var(--red-600);
  --marker:         var(--cyan);

  --eyebrow:        var(--red);      /* section eyebrow labels */
  --index-label:    var(--cyan);     /* numbered card labels */

  --focus-ring:     rgba(191, 75, 75, 0.55);
}
/* ==========================================================================
   trenz.codes — Typography tokens
   Two families: a neutral grotesque (Helvetica/Arial) for everything visible,
   and JetBrains Mono for the dev voice — logo, eyebrows, index numbers, code.
   Headlines are heavy, tight, editorial: huge sizes, negative tracking,
   line-height near 0.95.
   ========================================================================== */
:root {
  /* --- Families --- */
  --font-display: 'Helvetica Neue', Helvetica, Arial, 'Segoe UI', sans-serif;
  --font-body:    'Helvetica Neue', Helvetica, Arial, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;

  /* --- Weights --- */
  --fw-regular:   400; /* @kind other */
  --fw-medium:    500; /* @kind other */
  --fw-semibold:  600; /* @kind other */
  --fw-bold:      700; /* @kind other */

  /* --- Fluid display scale (tight, heavy headlines) --- */
  --text-display-xl: clamp(3.25rem, calc(7vw + 1rem), 6.5rem);   /* @kind spacing */
  --text-display-lg: clamp(2.5rem, calc(5vw + 0.5rem), 4.5rem);  /* @kind spacing */
  --text-display-md: clamp(2rem, calc(3.2vw + 0.5rem), 3.25rem); /* @kind spacing */

  /* --- Fixed type scale --- */
  --text-4xl: 2.5rem;    /* 40 */
  --text-3xl: 2rem;      /* 32 */
  --text-2xl: 1.5rem;    /* 24 */
  --text-xl:  1.25rem;   /* 20 */
  --text-lg:  1.125rem;  /* 18 */
  --text-base:1rem;      /* 16 */
  --text-sm:  0.875rem;  /* 14 */
  --text-xs:  0.75rem;   /* 12 */
  --text-2xs: 0.6875rem; /* 11 — eyebrow */

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

  /* --- Letter spacing --- */
  --ls-tighter: -0.03em;  /* big display @kind spacing */
  --ls-tight:   -0.015em; /* headings @kind spacing */
  --ls-normal:  0;        /* @kind spacing */
  --ls-wide:    0.08em;   /* @kind spacing */
  --ls-eyebrow: 0.16em;   /* mono eyebrow / label caps @kind spacing */
}
/* ==========================================================================
   trenz.codes — Spacing, layout & radii
   4px base grid. Generous vertical section rhythm; disciplined reading columns.
   ========================================================================== */
:root {
  /* --- Spacing scale (4px base) --- */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4  */
  --space-2:   0.5rem;   /* 8  */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.5rem;   /* 24 */
  --space-6:   2rem;     /* 32 */
  --space-7:   2.5rem;   /* 40 */
  --space-8:   3rem;     /* 48 */
  --space-10:  4rem;     /* 64 */
  --space-12:  5rem;     /* 80 */
  --space-16:  7rem;     /* 112 */
  --space-20:  9rem;     /* 144 — section padding */

  /* --- Radii (small, editorial — never pill-round on surfaces) --- */
  --radius-xs:  3px;
  --radius-sm:  5px;
  --radius-md:  7px;   /* cards, inputs */
  --radius-lg:  10px;  /* large panels */
  --radius-pill: 999px; /* buttons, chips */

  /* --- Layout --- */
  --container:      1200px;  /* max content width @kind spacing */
  --container-wide: 1440px;  /* @kind spacing */
  --measure:        62ch;    /* reading column @kind other (Startseite, allgemein) */
  --measure-lp:     80ch;    /* reading column Landingpages (.tc-lp) */
  --gutter:         clamp(1.25rem, 4vw, 4rem);  /* @kind spacing */
  --section-y:      clamp(4.5rem, 10vw, 9rem);  /* @kind spacing */

  /* --- Borders --- */
  --border-w:       1px;    /* @kind spacing */
  --border-w-strong:1.5px;  /* @kind spacing */
}
/* ==========================================================================
   trenz.codes — Effects: shadows, blueprint grid, glows, motion
   Dark UI: shadows are deep + subtle; "elevation" reads via border + faint top
   sheen more than drop shadow. Signature motifs: faint blueprint grid and a
   warm red corner glow.
   ========================================================================== */
:root {
  /* --- Shadows (deep, low-chroma) --- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg:  0 24px 60px rgba(0,0,0,0.55);
  --shadow-card: 0 1px 0 rgba(255,255,255,0.03) inset, 0 12px 32px rgba(0,0,0,0.5);
  --shadow-accent: 0 8px 30px rgba(191, 75, 75, 0.28);

  /* --- Blueprint grid (faint construction lines) --- */
  --grid-line: rgba(255, 255, 255, 0.035);
  --grid-size: 56px;
  --bg-blueprint:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);

  /* --- Corner glow (warm red radial) --- */
  --glow-red: radial-gradient(60% 60% at 0% 0%, var(--red-glow), transparent 70%);

  /* --- Card top sheen gradient --- */
  --card-sheen: linear-gradient(180deg, rgba(255,255,255,0.025), transparent 40%); /* @kind other */

  /* --- Motion --- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --dur-fast:   140ms;  /* @kind other */
  --dur-base:   220ms;  /* @kind other */
  --dur-slow:   420ms;  /* @kind other */

  /* --- Blur --- */
  --blur-panel: blur(14px);  /* @kind other */
}