/* CR-B3A4D5E6
   CLIPRENDER DESIGN SYSTEM -- base.css
   Base styles using CSS custom properties from tokens.css
*/
@import 'tokens.css';

:root {
  --font-sans: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Space Mono', 'SF Mono', monospace;
}

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

/* === Base HTML === */
html {
  background: var(--bg-base);
  color: var(--text-primary);
  scroll-behavior: smooth;
}

/* === Body === */
body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: -0.1px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  background: var(--bg-base);
  color: var(--text-primary);
}

/* === Typography === */
h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  color: var(--text-primary);
}

h1 {
  font-size: 64px;
  letter-spacing: -2.4px;
  line-height: 1.05;
  -webkit-text-fill-color: #ffffff;
}

h2 {
  font-size: 48px;
  letter-spacing: -1.8px;
  line-height: 1.08;
}

h3 {
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -1.0px;
  line-height: 1.15;
}

h4 {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.4px;
}

h5 {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.3px;
}

h6 {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

p {
  color: var(--text-secondary);
  line-height: 1.6;
  letter-spacing: -0.2px;
}

/* === Links === */
a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: color var(--duration-interaction) var(--ease-default);
}

a:hover {
  color: var(--accent-primary-hover);
}

/* === Lists === */
ul, ol {
  list-style: none;
}

/* === Images === */
img {
  max-width: 100%;
  display: block;
}

/* === Code === */
code, pre {
  font-family: var(--font-mono);
}

/* === Section Labels === */
.section-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-secondary);
}

/* === Glass Panel (disabled per design system) === */
.glass-panel {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
}

/* === Animation Timing Utilities === */
.transition-interaction {
  transition-duration: var(--duration-interaction);
  transition-timing-function: var(--ease-default);
}

.transition-layout {
  transition-duration: var(--duration-layout);
  transition-timing-function: var(--ease-default);
}

.transition-complex {
  transition-duration: var(--duration-complex);
  transition-timing-function: var(--ease-default);
}

/* === Keyframe Animations === */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}