/*
 * Design Tokens — Jan Holler Website
 * Philosophy: Editorial Dark
 * Stack: Static HTML/CSS/JS
 *
 * Dark mode is the default and primary experience.
 * Light mode tokens are included for system-preference support
 * but the brand is inherently dark.
 */

/* ─── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@800&family=Source+Serif+4:ital,wght@0,300;0,400;1,300;1,400&family=Inter:wght@400;500&display=swap');


/* ─── Dark mode (default) ───────────────────────────────────── */
:root {

  /* Color — Background */
  --color-bg-primary:        #000000;
  --color-bg-secondary:      #000000;
  --color-bg-tertiary:       #000000;
  --color-bg-overlay:        rgba(0, 0, 0, 0.92);

  /* Color — Text */
  --color-text-primary:      #ffffff;
  --color-text-secondary:    #ffffff;
  --color-text-tertiary:     #ffffff;
  --color-text-accent:       #ffffff;
  --color-text-inverse:      #000000;

  /* Color — Border */
  --color-border-primary:    #ffffff;
  --color-border-subtle:     #ffffff;

  /* Color — Accent */
  --color-accent:            #ffffff;
  --color-accent-hover:      #ffffff;
  --color-accent-active:     #ffffff;

  /* Color — Focus ring */
  --color-border-focus:      #ffffff;


  /* ─── Typography ─────────────────────────────────── */

  --font-display-bold:       'Barlow Condensed', sans-serif;
  --font-display-italic:     'Source Serif 4', serif;
  --font-mono:               'Inter', sans-serif;

  /* Weights */
  --font-weight-light:       300;
  --font-weight-normal:      400;
  --font-weight-extrabold:   800;

  /* Size scale */
  --font-size-xs:            11px;
  --font-size-sm:            14px;
  --font-size-base:          14px;
  --font-size-md:            16px;
  --font-size-lg:            18px;
  --font-size-xl:            24px;
  --font-size-2xl:           32px;
  --font-size-3xl:           48px;
  --font-size-4xl:           clamp(110px, 40vw, 440px);  /* hero name line 1 — füllt Viewport */
  --font-size-5xl:           clamp(70px,  23vw, 290px);  /* hero name line 2 */

  /* Line height */
  --line-height-tight:       0.9;    /* display/hero */
  --line-height-snug:        1.2;    /* headlines */
  --line-height-normal:      1.5;    /* body */
  --line-height-relaxed:     1.7;    /* about text */

  /* Letter spacing */
  --letter-spacing-tight:    -0.02em;  /* large display */
  --letter-spacing-normal:   0;
  --letter-spacing-wide:     0.12em;   /* uppercase nav/labels */
  --letter-spacing-wider:    0.18em;   /* very uppercase small caps */


  /* ─── Spacing (8px base, editorial scale) ─────────── */

  --space-0:    0;
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    24px;
  --space-6:    32px;
  --space-7:    48px;
  --space-8:    64px;
  --space-9:    96px;
  --space-10:   128px;
  --space-11:   192px;
  --space-12:   256px;


  /* ─── Layout ──────────────────────────────────────── */

  --max-width-text:          680px;    /* comfortable reading */
  --max-width-content:       960px;    /* content area */
  --max-width-wide:          1280px;   /* wide layout */
  --max-width-page:          1440px;   /* page cap */

  --border-radius-sm:        2px;
  --border-radius-md:        4px;
  --border-radius-lg:        8px;
  --border-radius-full:      9999px;

  /* Shadows — dark mode uses very subtle glows, not drop shadows */
  --shadow-sm:               0 1px 4px rgba(0,0,0,0.4);
  --shadow-md:               0 4px 16px rgba(0,0,0,0.5);
  --shadow-focus:            0 0 0 2px var(--color-border-focus);


  /* ─── Motion ──────────────────────────────────────── */

  --duration-instant:        50ms;
  --duration-fast:           150ms;
  --duration-normal:         250ms;
  --duration-slow:           400ms;
  --duration-slower:         600ms;

  --easing-default:          cubic-bezier(0.4, 0, 0.2, 1);
  --easing-out:              cubic-bezier(0, 0, 0.2, 1);
  --easing-in:               cubic-bezier(0.4, 0, 1, 1);


  /* ─── Breakpoints (reference only — use in media queries) ── */

  --breakpoint-sm:           375px;
  --breakpoint-md:           768px;
  --breakpoint-lg:           1024px;
  --breakpoint-xl:           1280px;


  /* ─── Component tokens ───────────────────────────── */

  /* Navigation */
  --nav-height:              72px;
  --nav-padding-x:           var(--space-6);
  --nav-font:                var(--font-mono);
  --nav-font-size:           var(--font-size-sm);
  --nav-letter-spacing:      var(--letter-spacing-wide);

  /* Section */
  --section-padding-y:       var(--space-11);   /* 192px — generous breathing room */
  --section-padding-x:       var(--space-6);    /* 32px mobile baseline */

  /* Portfolio */
  --portfolio-item-gap:      var(--space-2);    /* tight list */
  --portfolio-num-color:     var(--color-text-tertiary);

  /* Ticker */
  --ticker-font-size:        clamp(48px, 7.5vw, 100px);
  --ticker-duration:         120s;              /* speed of the auto-scroll */
  --ticker-gap:              var(--space-10);  /* gap between repeated items */

  /* Overlay */
  --overlay-z:               100;
}


/* ─── Light mode ────────────────────────────────────────────── */

[data-theme="light"] {
  --color-bg-primary:        #ffffff;
  --color-bg-secondary:      #ffffff;
  --color-bg-tertiary:       #ffffff;
  --color-bg-overlay:        rgba(255, 255, 255, 0.92);

  --color-text-primary:      #000000;
  --color-text-secondary:    #000000;
  --color-text-tertiary:     #000000;
  --color-text-accent:       #000000;
  --color-text-inverse:      #ffffff;

  --color-border-primary:    #000000;
  --color-border-subtle:     #000000;

  --color-accent:            #000000;
  --color-accent-hover:      #000000;
  --color-accent-active:     #000000;
}


/* ─── Reduced motion ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant:  0ms;
    --duration-fast:     0ms;
    --duration-normal:   0ms;
    --duration-slow:     0ms;
    --duration-slower:   0ms;
    --ticker-duration:   0s; /* ticker pauses entirely */
  }
}