/* =========================================================================
   Unload design system – tokeny
   Zdroj: claude.ai/design, _ds/unload-design-system-b35024e0-089f-4011-9072-6a29ce7bdb25/
          tokens/{colors,typography,spacing,radius,shadows,motion,base}.css
   Převzato beze změn hodnot, jen spojeno do jednoho souboru (jeden request).
   Fonty (tokens/fonts.css) se nenačítají přes @import, ale <link> v _Layout.cshtml.
   Při změně DS přegenerovat, neupravovat ručně – úpravy pro web patří do site.css.
   ========================================================================= */

/* --- colors.css --------------------------------------------------------- */
:root {
    /* Base */
    --canvas: #FDFDFC;              /* page background – warm off-white */
    --ink: #171717;                 /* primary text + primary button (neutral-900) */
    --black: #000000;
    --white: #FFFFFF;
    /* Neutral scale (Tailwind "neutral") */
    --neutral-50: #FAFAFA; --neutral-100: #F5F5F5; --neutral-200: #E5E5E5; --neutral-300: #D4D4D4;
    --neutral-400: #A3A3A3; --neutral-500: #737373; --neutral-600: #525252; --neutral-700: #404040;
    --neutral-800: #262626; --neutral-900: #171717;
    /* Dark surfaces (capsule sections + product mocks) */
    --surface-dark: #111111; --surface-dark-raised: #1A1A1A; --surface-dark-inset: #222222;
    /* Accent – used sparingly: one pricing card + ambient glow */
    --accent: #A5B4FC;                    /* periwinkle (indigo-300) */
    --glow-indigo: rgba(49,46,129,0.2);   /* indigo-900/20 blurred ambient circles */
    --glow-neutral: rgba(38,38,38,0.2);   /* neutral-800/20 blurred ambient circles */
    /* Status */
    --status-info-bg: #DBEAFE; --status-info-fg: #1D4ED8; --status-info-border: #BFDBFE; --status-info-dot: #2563EB;
    --status-live: #F97316;
    /* Semantic – light surfaces */
    --text-heading: var(--ink); --text-body: var(--neutral-600); --text-muted: var(--neutral-500);
    --text-faint: var(--neutral-400); --text-ghost: var(--neutral-300);
    --surface-card: #FFFFFF; --surface-subtle: var(--neutral-50); --surface-chip: var(--neutral-100);
    --border-default: var(--neutral-200); --border-subtle: var(--neutral-100);
    /* Semantic – dark surfaces */
    --text-on-dark: #FFFFFF; --text-on-dark-body: var(--neutral-400); --text-on-dark-muted: var(--neutral-500);
    --text-on-dark-faint: var(--neutral-600);
    --border-on-dark: var(--neutral-800); --border-on-dark-strong: var(--neutral-700);
}

/* --- typography.css ----------------------------------------------------- */
:root {
    --font-sans: 'Manrope', sans-serif;      /* everything */
    --font-mono: 'Space Mono', monospace;    /* numerals, indices, stats */
    --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
    /* Tracking */
    --tracking-tighter: -0.05em;   /* all display + headings */
    --tracking-tight: -0.025em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;      /* small uppercase labels */
    --tracking-widest: 0.1em;      /* eyebrow labels */
    /* Scale (desktop values; source steps down ~2 sizes on mobile) */
    --size-display-1: 6rem; --size-display-2: 4.5rem; --size-display-3: 3.75rem;
    --size-h2: 3rem; --size-h3: 2.25rem; --size-list: 1.875rem; --size-title: 1.25rem;
    --size-body-lg: 1.25rem; --size-body: 1rem; --size-body-sm: 0.875rem; --size-caption: 0.75rem; --size-micro: 0.625rem;
    /* Leading */
    --leading-display: 1.05; --leading-tight: 1.1; --leading-heading: 1.25; --leading-body: 1.625; --leading-none: 0.8;
}

/* --- spacing.css -------------------------------------------------------- */
:root {
    /* 4px grid (Tailwind) */
    --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; --space-32: 128px;
    /* Layout */
    --page-max: 1800px; --page-pad: 16px; --page-pad-md: 48px;
    --section-gap: 80px; --section-pad: 96px; --card-pad: 32px;
}

/* --- radius.css --------------------------------------------------------- */
:root {
    --radius-pill: 9999px;        /* buttons, inputs, badges, chips, avatars */
    --radius-inner: 0.75rem;      /* nested panels inside cards (xl) */
    --radius-card: 1rem;          /* standard cards (2xl) */
    --radius-card-lg: 1.5rem;     /* pricing cards (3xl) */
    --radius-section: 2rem;       /* capsule sections + framed imagery, mobile */
    --radius-section-lg: 3rem;    /* capsule sections + framed imagery, desktop */
}

/* --- shadows.css -------------------------------------------------------- */
:root {
    /* Light surfaces – shadows are tinted with neutral-200, never plain black */
    --shadow-btn: 0 10px 15px -3px rgba(229,229,229,0.5), 0 4px 6px -4px rgba(229,229,229,0.5);
    --shadow-capsule: 0 20px 25px -5px rgba(229,229,229,0.4), 0 8px 10px -6px rgba(229,229,229,0.4);
    --shadow-capsule-hover: 0 25px 50px -12px rgba(229,229,229,0.5);
    --shadow-card: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
    --shadow-float: 0 25px 50px -12px rgba(0,0,0,0.25);
    --shadow-frame: 0 1px 2px 0 rgba(0,0,0,0.05);
    --shadow-inset: inset 0 2px 4px 0 rgba(0,0,0,0.05);
    /* Dark surfaces – white glows instead of shadows */
    --glow-soft: 0 0 20px rgba(255,255,255,0.1);
    --glow-strong: 0 0 20px rgba(255,255,255,0.15);
    --glow-bar: 0 0 15px rgba(255,255,255,0.5);
}

/* --- motion.css --------------------------------------------------------- */
:root {
    --ease-reveal: cubic-bezier(0.16,1,0.3,1);   /* signature ease-out for scroll reveals */
    --ease-standard: cubic-bezier(0.4,0,0.2,1);
    --duration-fast: 300ms;       /* hovers */
    --duration-medium: 500ms;     /* card lifts, 3D tilts */
    --duration-reveal: 800ms;     /* scroll reveal */
}
@keyframes u-pulse { 50% { opacity: .5 } }
@keyframes u-spin { to { transform: rotate(360deg) } }
@keyframes u-reveal { from { opacity: 0; transform: translateY(30px) } to { opacity: 1; transform: translateY(0) } }
.u-reveal { animation: u-reveal var(--duration-reveal) var(--ease-reveal) both }
.u-pulse { animation: u-pulse 2s var(--ease-standard) infinite }

/* --- base.css ----------------------------------------------------------- */
body { font-family: var(--font-sans); background: var(--canvas); color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0 }
::selection { background: var(--ink); color: var(--white) }
a { color: inherit; text-decoration: none; transition: color var(--duration-fast) }
a:hover { color: var(--black) }
input::placeholder { color: var(--text-faint) }
::-webkit-scrollbar { width: 8px }
::-webkit-scrollbar-track { background: #f1f1f1 }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px }
::-webkit-scrollbar-thumb:hover { background: #555 }