/* linsslabs: Tokens und selbst gehostete Schriften (keine Verbindung zu Google, DSGVO-konform) */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/space-grotesk.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/space-grotesk.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/space-grotesk.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/space-grotesk.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/space-mono-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/space-mono-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ============================================================
   linsslabs — Colour tokens
   Direction: Modular Core. Ink canvas, soft-white modules,
   one electric-blue node lit. Restraint is the point.
   ============================================================ */
:root {
  /* ---- Brand primitives ---- */
  --ll-ink:        #0B0B0F;   /* near-black canvas / text */
  --ll-white:      #F7F8FA;   /* soft white — never pure #fff */
  --ll-electric:   #2D6BFF;   /* the lit node — primary accent */

  /* Electric blue tint ramp (light → deep) */
  --ll-blue-100:   #E6EDFF;
  --ll-blue-200:   #BFD2FF;
  --ll-blue-300:   #8DAEFF;
  --ll-blue-400:   #5C8CFF;
  --ll-blue-500:   #2D6BFF;   /* = electric */
  --ll-blue-600:   #1F54D6;   /* hover / pressed */
  --ll-blue-700:   #163FA3;

  /* Ink / neutral ramp (warm-cool neutral greys derived from ink) */
  --ll-ink-900:    #0B0B0F;
  --ll-ink-800:    #14151A;
  --ll-ink-700:    #1E2027;
  --ll-ink-600:    #2A2D37;
  --ll-ink-500:    #3A3E4A;
  --ll-gray-400:   #6B7080;
  --ll-gray-300:   #989DAC;
  --ll-gray-200:   #C7CBD6;
  --ll-gray-100:   #E6E8EE;
  --ll-gray-50:    #F1F2F6;

  /* Semantic status (used sparingly; brand stays mono+blue) */
  --ll-success:    #1F9D6B;
  --ll-warning:    #E0A23B;
  --ll-danger:     #E5484D;

  /* ============================================================
     Semantic aliases — LIGHT surface (default)
     ============================================================ */
  --surface-page:     var(--ll-white);
  --surface-card:     #FFFFFF;
  --surface-sunken:   var(--ll-gray-50);
  --surface-inverse:  var(--ll-ink-900);

  --text-strong:      var(--ll-ink-900);
  --text-body:        #2A2D37;
  --text-muted:       var(--ll-gray-400);
  --text-faint:       var(--ll-gray-300);
  --text-inverse:     var(--ll-white);
  --text-accent:      var(--ll-electric);
  --text-on-accent:   var(--ll-white);

  --border-subtle:    var(--ll-gray-100);
  --border-default:   var(--ll-gray-200);
  --border-strong:    var(--ll-ink-900);

  --accent:           var(--ll-electric);
  --accent-hover:     var(--ll-blue-600);
  --accent-active:    var(--ll-blue-700);
  --accent-soft:      var(--ll-blue-100);
  --focus-ring:       rgba(45, 107, 255, 0.45);
}

/* ============================================================
   Dark surface scope — apply [data-theme="dark"] on any element.
   The brand's primary canvas (hero, social, decks) is ink.
   ============================================================ */
[data-theme="dark"] {
  --surface-page:     var(--ll-ink-900);
  --surface-card:     var(--ll-ink-800);
  --surface-sunken:   #0E0F14;
  --surface-inverse:  var(--ll-white);

  --text-strong:      var(--ll-white);
  --text-body:        var(--ll-gray-200);
  --text-muted:       var(--ll-gray-400);
  --text-faint:       var(--ll-ink-500);
  --text-inverse:     var(--ll-ink-900);
  --text-accent:      var(--ll-blue-400);
  --text-on-accent:   var(--ll-white);

  --border-subtle:    var(--ll-ink-700);
  --border-default:   var(--ll-ink-600);
  --border-strong:    var(--ll-gray-200);

  --accent:           var(--ll-electric);
  --accent-hover:     var(--ll-blue-400);
  --accent-active:    var(--ll-blue-300);
  --accent-soft:      rgba(45, 107, 255, 0.16);
  --focus-ring:       rgba(92, 140, 255, 0.55);
}

/* ============================================================
   linsslabs — Typography tokens
   Display & UI: Space Grotesk. Labels, code, meta: Space Mono.
   Tight tracking on headings; wide tracking on mono labels.
   ============================================================ */
:root {
  /* Families */
  --font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SF Mono', 'Roboto Mono', monospace;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Type scale (rem, 16px base) — modular, ~1.25 */
  --text-2xs:  0.6875rem;  /* 11px — mono micro-labels */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.375rem;   /* 22px */
  --text-xl:   1.75rem;    /* 28px */
  --text-2xl:  2.25rem;    /* 36px */
  --text-3xl:  3rem;       /* 48px */
  --text-4xl:  4rem;       /* 64px */
  --text-5xl:  5.5rem;     /* 88px — wordmark / hero */

  /* Line heights */
  --leading-tight:   1.05;
  --leading-snug:    1.18;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing — negative for display, positive for mono labels */
  --tracking-tighter: -0.04em;  /* hero / wordmark */
  --tracking-tight:   -0.02em;  /* headings */
  --tracking-normal:  0;
  --tracking-wide:    0.12em;   /* mono labels */
  --tracking-wider:   0.22em;   /* mono tags (SAAS · SOFTWARE) */

  /* Semantic roles */
  --role-hero-size:     var(--text-5xl);
  --role-hero-tracking: var(--tracking-tighter);
  --role-h1-size:       var(--text-3xl);
  --role-h2-size:       var(--text-2xl);
  --role-h3-size:       var(--text-xl);
  --role-body-size:     var(--text-base);
  --role-label-size:    var(--text-2xs);
}

/* ============================================================
   linsslabs — Spacing tokens
   8px base grid (mirrors the modular-square logo construction:
   100px module, 22px gap ≈ 4.5:1). Steps follow the 3×3 rhythm.
   ============================================================ */
:root {
  --space-0:   0;
  --space-1:   0.25rem;  /* 4px  */
  --space-2:   0.5rem;   /* 8px  — base unit */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.5rem;   /* 24px */
  --space-6:   2rem;     /* 32px */
  --space-7:   3rem;     /* 48px */
  --space-8:   4rem;     /* 64px */
  --space-9:   6rem;     /* 96px */
  --space-10:  8rem;     /* 128px */

  /* Layout */
  --gutter:        var(--space-5);
  --section-y:     var(--space-9);
  --container-max: 1200px;
  --container-pad: var(--space-6);

  /* The modular grid gap (logo + grid backgrounds) */
  --module-gap:    0.22em;
}

/* ============================================================
   linsslabs — Radius tokens
   The mark is a rounded square: rx 18 on a 100px module = ~18%.
   UI radii echo that soft-but-square corner. Nothing is pill-round.
   ============================================================ */
:root {
  --radius-xs:   3px;    /* micro modules, tags */
  --radius-sm:   5px;    /* inputs, small buttons */
  --radius-md:   8px;    /* buttons, cards (default) */
  --radius-lg:   12px;   /* panels, dialogs */
  --radius-xl:   18px;   /* logo module / icon tiles */
  --radius-2xl:  24px;   /* large feature tiles */
  --radius-full: 999px;  /* avatars, status dots only */

  /* Logo construction ratio: radius = 18% of module size */
  --radius-module-ratio: 0.18;
}

/* ============================================================
   linsslabs — Elevation & shadow tokens
   Light surfaces use soft, low, neutral shadows (no colour cast).
   The signature glow is reserved for the electric node only.
   ============================================================ */
:root {
  /* Neutral elevation (light surfaces) */
  --shadow-xs:  0 1px 2px rgba(11, 11, 15, 0.06);
  --shadow-sm:  0 1px 3px rgba(11, 11, 15, 0.08), 0 1px 2px rgba(11, 11, 15, 0.04);
  --shadow-md:  0 4px 12px rgba(11, 11, 15, 0.08), 0 2px 4px rgba(11, 11, 15, 0.05);
  --shadow-lg:  0 12px 32px rgba(11, 11, 15, 0.12), 0 4px 8px rgba(11, 11, 15, 0.06);
  --shadow-xl:  0 24px 64px rgba(11, 11, 15, 0.18);

  /* Electric glow — the lit node. Use sparingly: active states, the accent module. */
  --glow-node:    0 0 0 4px rgba(45, 107, 255, 0.16);
  --glow-node-lg: 0 0 24px rgba(45, 107, 255, 0.45);

  /* Inset / hairline */
  --inset-hairline: inset 0 0 0 1px var(--border-subtle);

  /* Focus ring (keyboard) */
  --ring: 0 0 0 3px var(--focus-ring);
}

[data-theme="dark"] {
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md:  0 6px 18px rgba(0, 0, 0, 0.55);
  --shadow-lg:  0 16px 40px rgba(0, 0, 0, 0.6);
  --shadow-xl:  0 28px 72px rgba(0, 0, 0, 0.7);
}

/* ============================================================
   linsslabs — Motion tokens
   Modules "pop" into place with a slight overshoot (assembly),
   the node pulses. Everything else is quick and quiet.
   ============================================================ */
:root {
  --dur-instant: 80ms;  /* @kind other */
  --dur-fast:    150ms; /* @kind other */
  --dur-base:    240ms; /* @kind other */
  --dur-slow:    420ms; /* @kind other */
  --dur-pop:     500ms; /* @kind other */  /* module assembly */

  /* Easing */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);   /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);    /* @kind other */
  --ease-pop:      cubic-bezier(0.2, 1.3, 0.4, 1);   /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);       /* @kind other */
}

/* The signature node pulse — apply .ll-node-pulse to the accent module */
@keyframes ll-node-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45, 107, 255, 0); }
  50%      { box-shadow: 0 0 0 10px rgba(45, 107, 255, 0.18); }
}

/* Nest Ring loader — arms rotate, node blinks */
@keyframes ll-mark-spin { to { transform: rotate(360deg); } }
@keyframes ll-node-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Module pop-in (staggered reveals) */
@keyframes ll-module-pop {
  0%   { transform: scale(0) translateY(8px); opacity: 0; }
  100% { transform: scale(1) translateY(0);   opacity: 1; }
}