/* tokens.css — Design System Custom Properties — lottojaxxplus.de */

:root {
  /* ── Colors ── */
  --c-bg:          #0B1220;
  --c-bg-deep:     #08101C;
  --c-surface:     #111A2E;
  --c-surface-2:   #162038;
  --c-border:      #1F2A44;
  --c-border-2:    #2A3A5C;

  --c-accent:      #E40521;
  --c-accent-2:    #FF6A00;
  --c-accent-grad: linear-gradient(135deg, #E40521 0%, #FF6A00 100%);
  --c-accent-hover:#C8041D;

  --c-text:        #FFFFFF;
  --c-muted:       #B8C2D1;
  --c-subtle:      #7A8BA3;

  --c-warning:     #FFD400;
  --c-warning-bg:  #1A1600;
  --c-success:     #22C55E;
  --c-error:       #EF4444;

  --c-link:        #E40521;
  --c-link-hover:  #FF6A00;

  /* ── Typography ── */
  --font-sans:     'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:     'Roboto Mono', 'Courier New', monospace;

  --text-xs:       0.75rem;    /* 12px */
  --text-sm:       0.875rem;   /* 14px */
  --text-base:     1rem;       /* 16px */
  --text-lg:       1.125rem;   /* 18px */
  --text-xl:       1.25rem;    /* 20px */
  --text-2xl:      1.5rem;     /* 24px */
  --text-3xl:      1.875rem;   /* 30px */
  --text-4xl:      2.25rem;    /* 36px */
  --text-5xl:      3rem;       /* 48px */
  --text-6xl:      3.75rem;    /* 60px */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;
  --weight-bold:   700;
  --weight-black:  900;

  --leading-tight:  1.2;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  --tracking-tight: -0.02em;
  --tracking-wide:  0.04em;
  --tracking-wider: 0.08em;

  /* ── Spacing ── */
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* ── Layout ── */
  --container:      1240px;
  --container-sm:   640px;
  --container-md:   960px;
  --gutter:         1.5rem;   /* 24px */
  --gutter-sm:      1rem;

  --header-utility: 36px;
  --header-main:    80px;
  --warning-bar:    44px;
  --header-total:   calc(var(--header-utility) + var(--header-main) + var(--warning-bar));

  /* ── Radii ── */
  /* Eckiger Look: Block-/Button-Radien auf 0. --radius-full bleibt für runde
     Elemente (Lottozahlen-Kugeln, 18+-Badge), die NICHT eckig werden dürfen. */
  --radius-sm:   0;
  --radius-md:   0;
  --radius-lg:   0;
  --radius-xl:   0;
  --radius-2xl:  0;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-accent: 0 4px 24px rgba(228, 5, 33, 0.35);
  --shadow-glow:   0 0 40px rgba(228, 5, 33, 0.2);

  /* ── Transitions ── */
  --ease-fast:   150ms ease;
  --ease-base:   250ms ease;
  --ease-slow:   400ms ease;
  --ease-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-index layers ── */
  --z-base:     0;
  --z-above:    10;
  --z-nav:      100;
  --z-header:   200;
  --z-warning:  300;
  --z-overlay:  400;
  --z-modal:    500;
  --z-cookie:   600;
  --z-age-gate: 900;
  --z-top:      9999;
}

/* ── Utility classes from tokens ── */
.text-accent   { color: var(--c-accent); }
.text-muted    { color: var(--c-muted); }
.text-warning  { color: var(--c-warning); }
.bg-surface    { background: var(--c-surface); }
.border-card   { border: 1px solid var(--c-border); }