/* You B Tech Token-Driven Design System & Style Foundations */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Typography Tokens */
  --font-family-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-stack: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-base: 16px;
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-md: 12.8px;
  --font-size-lg: 14px;
  --font-size-xl: 16px;
  --font-size-2xl: 18px;
  --font-size-3xl: 20px;
  --font-size-4xl: 30px;
  
  --font-weight-base: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-line-height-base: 25.6px;

  /* Color Palette Tokens */
  --color-border-default: #0e0f0c;
  --color-text-secondary: #454745;
  --color-text-tertiary: #6a6c6a;
  --color-surface-muted: #ffffff;
  --color-surface-base: #000000;
  --color-surface-raised: #163300;
  --color-surface-strong: rgba(22, 51, 0, 0.6);
  --color-border-focus: #86efac;
  --color-state-error: #ef4444;

  /* Radius Tokens */
  --radius-xs: 16px;
  --radius-sm: 40px;
  --radius-md: 9999px;
  --radius-lg: 22369600px;

  /* Spacing Scale */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10.4px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;

  /* Shadow & Motion Tokens */
  --shadow-1: 0px 25px 50px -12px rgba(22, 51, 0, 0.4);
  --motion-instant: 150ms;
  --motion-fast: 200ms;
  --motion-normal: 300ms;
}

body {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  line-height: var(--font-line-height-base);
  font-weight: var(--font-weight-base);
  background-color: var(--color-surface-base);
  color: #f3f4f6;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
}

/* Glassmorphism & Surface Tokens */
.ybt-glass-card {
  background: var(--color-surface-strong);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-1);
}

.ybt-surface-raised {
  background-color: var(--color-surface-raised) !important;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xs);
}

/* Pill Round Action Buttons */
.ybt-btn-primary {
  background-color: #163300 !important;
  color: #86efac !important;
  border: 1px solid #86efac !important;
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  transition: all var(--motion-fast) ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
}

.ybt-btn-primary:hover {
  background-color: #86efac !important;
  color: #000000 !important;
  border-color: #86efac !important;
  transform: translateY(-1px);
}

.ybt-btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-border-focus);
}

.ybt-btn-primary:active {
  transform: scale(0.98);
}

.ybt-btn-primary:disabled {
  background-color: var(--color-surface-strong) !important;
  color: var(--color-text-tertiary) !important;
  cursor: not-allowed;
  border-color: transparent !important;
}

/* Pill Badges */
.ybt-badge {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised) !important;
  color: var(--color-border-focus) !important;
  border: 1px solid var(--color-border-default);
}

/* Form Controls with Focus Visibility */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--color-border-focus) !important;
  border-color: var(--color-border-focus) !important;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #09090b;
}
::-webkit-scrollbar-thumb {
  background: #27272a;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-focus);
}

/* Video Player Aspect Ratio Box */
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-xs);
  background: #000;
  border: 1px solid var(--color-border-default);
}

.video-container iframe, 
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}