/* ============================================================
   DESIGN SYSTEM - Túlavé kino
   ============================================================ */

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

:root {
  /* Brand */
  --color-red: #EB002F;
  --color-red-80: #EF3359;
  --color-red-60: #F36683;
  --color-red-40: #F799AD;
  --color-red-20: #FBCCD6;
  --color-black: #1A1A1A;
  --color-black-80: #484848;
  --color-black-60: #777777;
  --color-black-40: #A5A5A5;
  --color-black-20: #D2D2D2;
  --color-white: #FFFFFF;

  /* UI */
  --primary: var(--color-red);
  --primary-hover: #C50028;
  --primary-light: var(--color-red-20);
  --bg: var(--color-white);
  --surface: #F5F5F5;
  --border: var(--color-black-20);
  --text-primary: var(--color-black);
  --text-secondary: var(--color-black-60);
  --text-muted: var(--color-black-40);

  /* Team colors */
  --zapad-1: #3B82F6;
  --zapad-2: #6366F1;
  --zapad-3: #8B5CF6;
  --stred-1: #A855F7;
  --sever-1: #F97316;
  --vychod-1: #EAB308;
  --vychod-2: #DC2626;

  /* Status */
  --volne: #10B981;
  --obsadene: var(--color-red);
  --nedostupne: var(--color-black-40);

  /* Typography */
  --font-family: 'Montserrat', system-ui, -apple-system, sans-serif;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
}

/* ---- Reset ---- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--surface);
  min-height: 100vh;
}

/* ---- Typography ---- */
h1 { font-size: 2rem; font-weight: 700; line-height: 1.2; }
h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
h3 { font-size: 1.25rem; font-weight: 500; line-height: 1.2; }
small { font-size: 0.875rem; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--primary);
  color: var(--color-white);
}

.btn-primary:hover {
  background: var(--primary-hover);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}

.btn-ghost:hover {
  background: var(--surface);
  color: var(--text-primary);
}

.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--radius-sm);
}

/* ---- Utilities ---- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }