/* ArtRex Design System — Design Tokens
   Extrahiert per Live-Analyse von art-rex.com (24.07.2026) */

:root {
  /* Color */
  --color-bg-primary: #1C1C1C;
  --color-bg-secondary: #111111;
  --color-bg-elevated: #262626;
  --color-surface-glass: rgba(20, 20, 20, 0.5);
  --color-surface-overlay: rgba(0, 0, 0, 0.36);
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #A3A3A3;
  --color-text-muted: rgba(255, 255, 255, 0.6);
  --color-accent: #EFFF37;
  --color-inverse-bg: #FFFFFF;
  --color-inverse-text: #000000;

  /* Font Families */
  --font-mono: "Roboto Mono", monospace;
  --font-sans: "Inter Tight", sans-serif;

  /* Type Scale (baked-in 1.1x — formerly compensated via body{zoom:1.1}) */
  --text-case-title-size: 57.2px;
  --text-case-title-weight: 800;
  --text-case-title-tracking: -1.1px;

  --text-h1-size: 70.4px;
  --text-h1-weight: 400;
  --text-h1-tracking: -2.2px;

  --text-subheadline-size: 35.2px;
  --text-subheadline-weight: 400;

  --text-hero-headline-size: 88px;
  --text-hero-headline-weight: 600;
  --text-hero-headline-tracking: -1.1px;
  --text-hero-headline-line-height: 96.8px;

  --text-hero-statement-size: 35.2px;
  --text-hero-statement-weight: 400;

  --text-body-size: 26.4px;
  --text-body-weight: 400;

  --text-card-subtitle-size: 22px;
  --text-card-subtitle-weight: 400;

  --text-name-role-size: 22px;
  --text-name-role-weight: 400;

  --text-input-size: 17.6px;
  --text-input-weight: 400;

  --text-tag-size: 14.3px;
  --text-tag-weight: 400;
  --text-tag-tracking: 0.715px;

  --text-clock-size: 132px;
  --text-clock-weight: 700;

  /* Radius */
  --radius-pill: 110px;
  --radius-card: 17.6px;
  --radius-input: 8.8px;

  /* Card dimensions (reference) */
  --card-width: 646.8px;
  --card-height: 572px;

  /* Layout */
  --container-max-width: 1672px;

  /* Textures & Background Effects */
  --pattern-stripe: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.025) 0px,
    rgba(255, 255, 255, 0.025) 26.4px,
    transparent 26.4px,
    transparent 52.8px
  );

  --pattern-checker: repeating-conic-gradient(
    var(--color-text-primary) 0% 25%,
    var(--color-bg-primary) 0% 50%
  );
  --pattern-checker-size: 70.4px 70.4px;

  --glow-accent: radial-gradient(
    65% 60% at 35% 0%,
    var(--color-accent) 0%,
    rgba(239, 255, 55, 0.45) 40%,
    rgba(239, 255, 55, 0) 72%
  );
  --glow-blur: 93.5px;
}

/* Component reference patterns (not final markup, for design-review only) */

.tag-pill {
  font-family: var(--font-mono);
  font-size: var(--text-tag-size);
  font-weight: var(--text-tag-weight);
  letter-spacing: var(--text-tag-tracking);
  text-transform: uppercase;
  color: var(--color-text-primary);
  background: var(--color-surface-overlay);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
}

.nav-pill {
  background: var(--color-surface-glass);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(12px);
}

.card {
  width: var(--card-width);
  height: var(--card-height);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-bg-secondary);
}

.card-title {
  font-family: var(--font-sans);
  font-size: var(--text-case-title-size);
  font-weight: var(--text-case-title-weight);
  letter-spacing: var(--text-case-title-tracking);
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.card-subtitle {
  font-family: var(--font-sans);
  font-size: var(--text-card-subtitle-size);
  font-weight: var(--text-card-subtitle-weight);
  color: var(--color-text-muted);
}

.btn-primary {
  font-family: var(--font-mono);
  text-transform: uppercase;
  background: var(--color-inverse-bg);
  color: var(--color-inverse-text);
  border-radius: var(--radius-input);
}

.input-field {
  font-family: var(--font-mono);
  font-size: var(--text-input-size);
  color: var(--color-text-primary);
  background: var(--color-surface-overlay);
  border-radius: var(--radius-input);
}

/* Texture / Effect utility classes */

.texture-stripe {
  background-color: var(--color-bg-primary);
  background-image: var(--pattern-stripe);
}

.texture-checker {
  background-image: var(--pattern-checker);
  background-size: var(--pattern-checker-size);
}

.effect-glow {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-primary);
}
.effect-glow::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: var(--glow-accent);
  filter: blur(var(--glow-blur));
  pointer-events: none;
}