/* ============================================================
   dela-media — colors_and_type.css
   Foundations: font-face, color tokens, type ramp.
   Brand: dark, minimalist, warm-orange accent, white text.
   ============================================================ */

/* ---- Type: self-hosted local fonts (no external CDN) ----
   Display = Space Grotesk, Body/UI = Plus Jakarta Sans, Mono = JetBrains Mono.
   Defined in fonts.css (@font-face). Weights 300–700; the display/ultra
   weight maps to 700 below. No native italics — accent italics render as
   synthesized oblique (unchanged behaviour). */

:root {
  /* ---- Brand colors ---- */
  /* The brand lives in deep blacks with a single warm-orange accent.
     The accent is intentionally rare — used for separators, hover
     marks, the ">> DELA-MEDIA <<" brand stamp, and active state. */
  --color-black:        #000000;   /* page background, hero, footer */
  --color-ink:          #0a0a0a;   /* slightly elevated panels */
  --color-ink-2:        #141414;   /* cards, work-item backgrounds */
  --color-ink-3:        #1d1d1d;   /* hover lift, footer */
  --color-ink-4:        #2a2a2a;   /* dividers on dark, input bg */
  --color-rule:         #ffffff14; /* hairlines on dark (8%) */
  --color-rule-strong:  #ffffff33; /* hairlines emphasis */

  --color-white:        #ffffff;   /* primary text on dark */
  --color-fog:          #e6e6e6;   /* secondary text */
  --color-mist:         #b3b3b3;   /* tertiary / captions */
  --color-haze:         #777777;   /* meta, placeholder */
  --color-stone:        #555555;   /* disabled text */

  --color-accent:       #f5a623;   /* warm orange — primary accent */
  --color-accent-hot:   #ff8a1f;   /* hover, lit-up accent */
  --color-accent-deep:  #c47712;   /* press */
  --color-accent-dim:   #f5a62333; /* tints, glow */

  /* Studio-cyan appears in product photography (tube lights);
     reserved for rare editorial moments, not a UI color. */
  --color-studio-cyan:  #5fd9d6;

  /* ---- Semantic foreground / background ---- */
  --fg-1:  var(--color-white);
  --fg-2:  var(--color-fog);
  --fg-3:  var(--color-mist);
  --fg-4:  var(--color-haze);
  --fg-accent: var(--color-accent);

  --bg-1:  var(--color-black);
  --bg-2:  var(--color-ink);
  --bg-3:  var(--color-ink-2);
  --bg-4:  var(--color-ink-3);

  --rule:  var(--color-rule);

  /* ---- Type families ---- */
  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-ui:      'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  /* ---- Weights (General Sans — caps at 700) ---- */
  --w-light:   300;
  --w-regular: 400;
  --w-medium:  500;
  --w-bold:    700;
  --w-ultra:   700;

  /* ---- Type scale (dark, cinematic — display is BIG) ---- */
  --fs-eyebrow:  12px;   /* >> labels, tag chips */
  --fs-meta:     13px;
  --fs-caption:  14px;
  --fs-body:     16px;
  --fs-body-lg:  18px;
  --fs-lede:     20px;
  --fs-h6:       16px;
  --fs-h5:       18px;
  --fs-h4:       22px;
  --fs-h3:       28px;
  --fs-h2:       40px;
  --fs-h1:       64px;
  --fs-display:  88px;
  --fs-hero:     128px;

  /* ---- Line heights ---- */
  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  /* ---- Letter spacing ---- */
  /* Section eyebrows and small caps are tracked WIDE — a clear
     signature of the existing site (e.g. "DIREKT ANRUFEN"). */
  --ls-tight:   -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.08em;
  --ls-wider:    0.18em;   /* eyebrows, tags */
  --ls-widest:   0.32em;   /* section-title-descr style */

  /* ---- Spacing scale (px) — used by layout, not type ---- */
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 100px;
  --space-32: 140px;
  --space-40: 200px;

  /* ---- Radii ---- */
  /* The site is mostly square. Buttons + pill chips are the
     exception — fully rounded "btn-round" pills. */
  --radius-0:    0px;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-hairline: 1px solid var(--color-rule);
  --border-strong:   1px solid var(--color-rule-strong);
  --border-btn:      2px solid var(--color-white);
  --border-btn-accent: 2px solid var(--color-accent);

  /* ---- Shadows / glows ---- */
  /* Mostly NO shadow on dark. When elevation is needed we use a
     subtle accent glow on hover, not a drop-shadow. */
  --shadow-card:   0 2px 24px 0 rgba(0,0,0,.45);
  --shadow-lift:   0 8px 48px 0 rgba(0,0,0,.60);
  --glow-accent:   0 0 32px var(--color-accent-dim);
  --inner-vignette: inset 0 0 200px 40px rgba(0,0,0,.55);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(.16,.84,.30,1);
  --ease-in-out: cubic-bezier(.45,.05,.55,.95);
  --dur-fast:    180ms;
  --dur-base:    320ms;
  --dur-slow:    640ms;
  --dur-cinema:  1200ms;
}

/* ============================================================
   Semantic element styles
   ============================================================ */

.dela-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-ultra);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  text-transform: none;
  margin: 0;
}

.dela-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0;
}

.dela-h3 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: 0;
  color: var(--fg-1);
  margin: 0;
}

.dela-h4 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

.dela-display {
  font-family: var(--font-display);
  font-weight: var(--w-ultra);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

.dela-hero {
  font-family: var(--font-display);
  font-weight: var(--w-ultra);
  font-size: var(--fs-hero);
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: var(--fg-1);
}

.dela-p {
  font-family: var(--font-body);
  font-weight: var(--w-light);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  margin: 0;
}

.dela-lede {
  font-family: var(--font-body);
  font-weight: var(--w-light);
  font-size: var(--fs-lede);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}

.dela-caption {
  font-family: var(--font-ui);
  font-weight: var(--w-regular);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.dela-eyebrow {
  font-family: var(--font-ui);
  font-weight: var(--w-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-accent);
}

.dela-eyebrow--white {
  color: var(--fg-1);
}

.dela-brand-stamp {
  /* >> DELA-MEDIA <<  — the signature wordmark style */
  font-family: var(--font-ui);
  font-weight: var(--w-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-accent);
}

.dela-link {
  color: var(--fg-1);
  text-decoration: none;
  border-bottom: 1px solid var(--color-rule-strong);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.dela-link:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.dela-mono {
  font-family: var(--font-mono);
  font-weight: var(--w-regular);
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-2);
}