/* NinjaCross Time — Design System
   Portiert aus dem Claude-Design-Projekt "NinjaCross Time Design System"
   (331a25f2-f781-4bfd-a0c7-bf652d825101).

   Brand-Primitive aus den Original-Assets:
     Blau   #223C83  (NC-Masken N-Mark)
     Gelb   #F2E500  (NC Slide-Buttons)
     Sky    #49BAE6  (Logo-Badge)

   Diese Datei wird VOR der jeweiligen Seiten-CSS eingebunden. */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

:root {
    /* ---- Brand blue (navy / royal) ---- */
    --blue-50: #eef1f9;
    --blue-100: #dce2f2;
    --blue-200: #b6c3e5;
    --blue-300: #8499d1;
    --blue-400: #5470bb;
    --blue-500: #33509f;
    --blue-600: #223c83;
    --blue-700: #1b3069;
    --blue-800: #152450;
    --blue-900: #0e1836;
    --blue-950: #080f22;

    /* ---- Brand yellow (energy / timing accent) ---- */
    --yellow-50: #fffde6;
    --yellow-100: #fefbb0;
    --yellow-200: #fdf672;
    --yellow-300: #f8ee2e;
    --yellow-400: #f2e500;
    --yellow-500: #d2c700;
    --yellow-600: #a89f00;
    --yellow-700: #7c7500;

    /* ---- Brand sky-blue (Badge / "Wasser") ---- */
    --sky-50: #eaf7fc;
    --sky-100: #d6eff9;
    --sky-200: #ade0f3;
    --sky-300: #7fceec;
    --sky-400: #49bae6;
    --sky-500: #2a9fce;
    --sky-600: #1f7ea6;
    --sky-700: #175f7d;

    /* ---- Neutrals (kühl, leicht blaustichig) ---- */
    --neutral-0: #ffffff;
    --neutral-50: #f6f7fa;
    --neutral-100: #eceef4;
    --neutral-200: #dce0ea;
    --neutral-300: #c3c9d9;
    --neutral-400: #9aa2bb;
    --neutral-500: #6e7793;
    --neutral-600: #505873;
    --neutral-700: #3a4157;
    --neutral-800: #262b3b;
    --neutral-900: #14171f;

    /* ---- Semantische Status (Stoppuhr-Metapher: go / ready / stop) ---- */
    --green-100: #d8f3e3;
    --green-500: #1fa663;
    --green-700: #137345;
    --red-100: #fbdcdc;
    --red-500: #e23636;
    --red-700: #a51f1f;
    --amber-100: #fdeecb;
    --amber-500: #f59e0b;
    --amber-700: #b3730a;

    /* ---- Semantische Aliase ---- */
    --color-primary: var(--blue-600);
    --color-primary-hover: var(--blue-700);
    --color-primary-active: var(--blue-800);
    --color-primary-subtle: var(--blue-50);
    --color-on-primary: var(--neutral-0);

    --color-accent: var(--yellow-400);
    --color-accent-hover: var(--yellow-500);
    --color-accent-active: var(--yellow-600);
    --color-on-accent: var(--blue-900);

    --color-secondary: var(--sky-400);
    --color-secondary-hover: var(--sky-500);
    --color-secondary-subtle: var(--sky-100);
    --color-on-secondary: var(--blue-900);

    --surface-page: var(--blue-950);
    --surface-card: var(--blue-800);
    --surface-sunken: var(--blue-900);
    --surface-raised: var(--blue-700);
    --surface-inverse: var(--neutral-0);
    --surface-brand: var(--blue-600);

    --text-strong: #ffffff;
    --text-body: var(--blue-100);
    --text-muted: var(--blue-200);
    --text-dim: var(--blue-300);
    --text-on-accent: var(--blue-900);

    --border-subtle: rgba(255, 255, 255, .07);
    --border-default: rgba(255, 255, 255, .12);
    --border-strong: rgba(255, 255, 255, .2);
    --border-focus: var(--sky-400);

    --status-go: var(--green-500);
    --status-go-bg: var(--green-100);
    --status-stop: var(--red-500);
    --status-stop-bg: var(--red-100);
    --status-warn: var(--amber-500);
    --status-warn-bg: var(--amber-100);

    --focus-ring: 0 0 0 3px rgba(242, 229, 0, .45);
    --focus-ring-sky: 0 0 0 3px rgba(73, 186, 230, .35);

    /* ---- Typografie ---- */
    --font-sans: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Outfit", system-ui, sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --fw-black: 900;

    --fs-display-2xl: 72px;
    --fs-display-xl: 56px;
    --fs-display-lg: 44px;
    --fs-h1: 36px;
    --fs-h2: 28px;
    --fs-h3: 22px;
    --fs-h4: 18px;
    --fs-body-lg: 18px;
    --fs-body: 16px;
    --fs-body-sm: 14px;
    --fs-caption: 12px;
    --fs-overline: 11px;

    --lh-tight: 1.05;
    --lh-snug: 1.2;
    --lh-normal: 1.5;
    --lh-relaxed: 1.65;

    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.04em;
    --tracking-overline: 0.14em;

    /* ---- Spacing (4px-Raster) ---- */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    --container-sm: 640px;
    --container-md: 960px;
    --container-lg: 1200px;
    --container-xl: 1440px;

    /* ---- Radius & Schatten ---- */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-pill: 999px;

    --border-width: 1.5px;
    --border-width-strong: 2px;

    --shadow-xs: 0 1px 2px rgba(3, 5, 12, .2);
    --shadow-sm: 0 2px 6px rgba(3, 5, 12, .28);
    --shadow-md: 0 6px 16px rgba(3, 5, 12, .34);
    --shadow-lg: 0 14px 34px rgba(3, 5, 12, .44);
    --shadow-xl: 0 24px 60px rgba(3, 5, 12, .55);
    --shadow-accent: 0 8px 22px rgba(242, 229, 0, .35);
    --shadow-brand: 0 10px 28px rgba(34, 60, 131, .45);
    --shadow-inset: inset 0 1px 2px rgba(3, 5, 12, .35);

    /* ---- Motion ---- */
    --ease-standard: cubic-bezier(.2, .7, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in: cubic-bezier(.5, 0, .9, .4);
    --ease-overshoot: cubic-bezier(.34, 1.56, .64, 1);

    --dur-instant: 80ms;
    --dur-fast: 140ms;
    --dur-base: 220ms;
    --dur-slow: 360ms;
    --dur-timer: 1000ms;
}

/* ================= Basis-Layer ================= */

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    color: var(--text-strong);
    background: var(--blue-950);
    background-image:
        radial-gradient(circle at 18% 0%, rgba(34, 60, 131, .55) 0%, transparent 55%),
        radial-gradient(circle at 85% 12%, rgba(73, 186, 230, .14) 0%, transparent 45%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: var(--yellow-400);
    color: var(--blue-900);
}

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Zahlenwerte (Zeiten, Punkte, Zähler) laufen monospaced & tabellarisch */
.nc-num,
.time-result,
.stat-value,
.best-time,
.timer-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* Overline / Eyebrow-Labels */
.nc-overline {
    font-size: var(--fs-overline);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--sky-400);
}

/* Scrollbars im Markenblau */
* {
    scrollbar-color: var(--blue-600) transparent;
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--blue-600);
    border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--blue-500);
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}