o2o-infinith-demo/src/index.css

@import "tailwindcss";

/* Self-hosted Pretendard Variable — CDN/네트워크 차단 환경에서도 동일 렌더링 보장 */
@font-face {
  font-family: 'Pretendard Variable';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/PretendardVariable.woff2') format('woff2-variations');
}

@theme {
  /* fallback 체인: self-host Pretendard → CDN Pretendard → Inter → 한글 시스템 폰트 (Mac/Win/Android) → sans-serif */
  --font-sans: "Pretendard Variable", "Pretendard", "Inter", "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Noto Sans KR", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Playfair Display", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  
  --color-primary-900: #0A1128; /* Dark Navy for text and buttons */
  --color-primary-800: #1A2B5E;
  --color-primary-50: #F4F6FB;
  
  --color-accent: #6C5CE7; /* Purple accent */

  /* INFINITH Semantic Status Colors — pastel palette derived from brand gradient */
  /* Critical/Negative: warm rose (peach-toned) */
  --color-status-critical-bg: #FFF0F0;
  --color-status-critical-text: #7C3A4B;
  --color-status-critical-border: #F5D5DC;
  --color-status-critical-dot: #D4889A;

  /* Warning/Pending: warm sand (cream-toned) */
  --color-status-warning-bg: #FFF6ED;
  --color-status-warning-text: #7C5C3A;
  --color-status-warning-border: #F5E0C5;
  --color-status-warning-dot: #D4A872;

  /* Good/Positive: soft lavender (purple-toned) */
  --color-status-good-bg: #F3F0FF;
  --color-status-good-text: #4A3A7C;
  --color-status-good-border: #D5CDF5;
  --color-status-good-dot: #9B8AD4;

  /* Excellent/Info: cool periwinkle (blue-lavender) */
  --color-status-info-bg: #EFF0FF;
  --color-status-info-text: #3A3F7C;
  --color-status-info-border: #C5CBF5;
  --color-status-info-dot: #7A84D4;

  --animate-blob: blob 7s infinite;
}

@keyframes blob {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  33% {
    transform: translate3d(15px, -25px, 0) scale(1.05);
  }
  66% {
    transform: translate3d(-10px, 10px, 0) scale(0.95);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

@layer base {
  html {
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.15) transparent;
  }
  html::-webkit-scrollbar {
    width: 6px;
  }
  html::-webkit-scrollbar-track {
    background: transparent;
  }
  html::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 3px;
  }
  body {
    @apply font-sans text-slate-800 bg-slate-50 antialiased;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-serif text-primary-900;
  }

  /* Headings inside dark/white-text containers inherit white */
  .text-white h1, .text-white h2, .text-white h3,
  .text-white h4, .text-white h5, .text-white h6 {
    @apply text-white;
  }
}

.glass-card {
  @apply bg-white/70 backdrop-blur-xl border border-white/40 shadow-[0_8px_32px_0_rgba(31,38,135,0.07)] rounded-2xl;
}

.gradient-bg {
  background: radial-gradient(circle at top left, #fdfbfb, #f3e7e9);
  @apply relative;
}

.gradient-bg::before {
  content: "";
  @apply absolute inset-0 bg-white/30 backdrop-blur-[2px] pointer-events-none;
}

.soft-gradient {
  background: linear-gradient(145deg, #fdfbfb 0%, #ebedee 100%);
}

.text-gradient {
  background: linear-gradient(to right, #0A1128, #3b5998);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes blob-large {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  33% {
    transform: translate3d(4vw, -4vh, 0) scale(1.05);
  }
  66% {
    transform: translate3d(-4vw, 4vh, 0) scale(0.95);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* GPU-accelerate all blob animations to prevent layout jitter */
.animate-blob, .animate-blob-large {
  will-change: transform;
  contain: layout style;
  backface-visibility: hidden;
}

.animate-blob-large {
  animation: blob-large 25s infinite ease-in-out;
}

.animation-delay-7000 {
  animation-delay: 7s;
}

.animation-delay-14000 {
  animation-delay: 14s;
}