/* ============================================================
   kuljkin.de — Design Tokens
   Portable CSS-Variables für neue Webapplikationen im gleichen
   Design-System. Standalone-Import via:

     <link rel="stylesheet" href="https://www.kuljkin.de/design-tokens.css" />

   oder als Datei-Kopie in ein neues Projekt einbinden.

   Single Source of Truth: src/styles/global.css (im kuljkin-static-Repo)
   Bei Token-Änderungen: hier UND in global.css aktualisieren.

   Version: 1.1.0
   Stand: 2026-06-09
   Lizenz: für eigene Projekte von Philipp Kuljkin frei nutzbar.
   ============================================================ */

:root {
  /* ============================================================
     FARBEN
     ============================================================ */

  /* Akzent (Brand) — EIN Farbton (#e65616) in drei Helligkeitsstufen (WCAG-AA) */
  --color-orange: #e65616;        /* Basis: Borders, Dots, Linien, Tints (Deko) */
  --color-orange-text: #fd5f18;   /* heller: Orange-Text auf dunkel (≥ 4,5:1) */
  --color-orange-btn: #c44913;    /* dunkler: weißer Text auf Orange-Füllung (≥ 4,87:1) */
  --color-orange-dark: #d1310a;   /* Button-Hover */
  --color-orange-glow: rgba(230, 86, 22, 0.15);

  /* Anthrazit-Töne (Backgrounds, übernommen von Blocksy-Palette) */
  --color-bg: #1a1a1a;          /* Page-Hintergrund */
  --color-section: #1f1f1f;     /* Section-Wechsel */
  --color-section-2: #292929;   /* Card-Hintergrund */
  --color-border: #353535;      /* Trennlinien */

  /* Grautöne (Text) */
  --color-white: #ffffff;
  --color-grey-light: #cccccc;
  --color-grey: #a0a0a0;
  --color-grey-dark: #303030;
  --color-grey-darker: #292929;

  /* ============================================================
     TYPOGRAFIE
     ============================================================ */

  /* Schriftfamilien (selbst-gehostet für DSGVO + Performance) */
  --font-heading: 'Roboto', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

  /* Schriftgrößen — fluid via clamp() für responsives Verhalten */
  --text-h1: clamp(2.5rem, 6.5vw, 5.25rem);        /* 40 → 84 px */
  --text-h2: clamp(1.875rem, 4.25vw, 3.25rem);     /* 30 → 52 px */
  --text-h3: clamp(1.25rem, 2.5vw, 1.875rem);      /* 20 → 30 px */
  --text-h4: 1.125rem;                              /* 18 px */
  --text-body: 17px;                                /* Body-Default */
  --text-small: 13px;                               /* Eyebrow, Captions */
  --text-tiny: 11px;                                /* Sub-Labels */

  /* Bigtype für Hero-Headlines */
  --text-bigtype: clamp(2.5rem, 7vw, 5rem);

  /* Schriftgewichte */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;

  /* Line-Heights */
  --line-tight: 1.05;       /* Mehrzeilige Headlines */
  --line-normal: 1.5;       /* Body-Text */
  --line-loose: 1.65;       /* Lead-Texte für besseres Atmen */

  /* Letter-Spacing */
  --track-tight: -0.03em;   /* Big-Type-Headlines */
  --track-normal: 0;
  --track-wide: 0.08em;     /* Buttons */
  --track-eyebrow: 0.18em;  /* Eyebrows, Caps-Labels */

  /* ============================================================
     SPACING — 4px-Skala
     ============================================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --content-width: 1280px;    /* Standard-Container max-width */
  --content-narrow: 720px;    /* Schmaler Container für Text */

  /* ============================================================
     BORDER-RADIUS
     ============================================================ */
  --radius-sm: 4px;
  --radius: 8px;              /* Default für kleine Elemente */
  --radius-md: 10px;          /* Buttons */
  --radius-lg: 16px;          /* Cards */
  --radius-xl: 18px;          /* Premium-Cards */
  --radius-pill: 999px;       /* Pills, Filter */

  /* ============================================================
     SHADOWS
     ============================================================ */
  --shadow-sm: 0 12px 30px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 40px 80px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-orange: 0 12px 40px rgba(230, 86, 22, 0.3);
  --shadow-orange-hover: 0 20px 60px rgba(230, 86, 22, 0.45);

  /* ============================================================
     ANIMATION
     ============================================================ */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);    /* Smooth ease-out */
  --duration-fast: 0.15s;
  --duration-normal: 0.3s;
  --duration-slow: 0.4s;
  --duration-slower: 0.6s;

  /* ============================================================
     BREAKPOINTS (Reference — als CSS-Variablen nicht direkt nutzbar,
     hier als Doku-Anker)
     ============================================================ */
  /*
    Mobile  : ≤ 500px (Kleinst-Phones)
    Phone   : ≤ 700px (Standard-Phones)
    Tablet  : ≤ 900px (Tablets, kleine Laptops)
    Desktop : ≤ 1100px (Standard-Desktop)
    Wide    : ≥ 1280px (Volle Breite)
  */
}

/* ============================================================
   BODY-DEFAULT
   ============================================================ */
body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--line-normal);
  color: var(--color-grey-light);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   HEADINGS (Roboto Black für Big-Type, sonst Bold)
   ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-white);
  letter-spacing: var(--track-tight);
  line-height: var(--line-tight);
}

h1 { font-size: var(--text-h1); font-weight: var(--weight-black); }
h2 { font-size: var(--text-h2); font-weight: var(--weight-bold); }
h3 { font-size: var(--text-h3); font-weight: var(--weight-bold); }
h4 { font-size: var(--text-h4); font-weight: var(--weight-semibold); }