/* Tealwater Capital — Coming Soon */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600&display=swap');

/* ============================
   Design Tokens
   ============================ */
:root {
  /* Type Scale */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.9rem  + 0.5vw,  1.125rem);
  --text-lg:   clamp(1.125rem, 0.95rem + 0.85vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1rem    + 1.5vw,  2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Fonts */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Cormorant Garamond', Georgia, serif;

  /* Tealwater Brand Colors — Light */
  --color-bg:           #EFF2F3;
  --color-surface:      #E8ECED;
  --color-text:         #334C52;
  --color-text-muted:   #6B8B92;
  --color-text-faint:   #8AABB4;
  --color-primary:      #5F868E;
  --color-divider:      rgba(95, 134, 142, 0.15);
  --color-border:       rgba(95, 134, 142, 0.2);

  /* Radius */
  --radius-sm: 0.25rem;

  /* Transitions */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dark Mode */
[data-theme="dark"] {
  --color-bg:           #1A2426;
  --color-surface:      #1F2C2F;
  --color-text:         #C8D8DC;
  --color-text-muted:   #7A9BA3;
  --color-text-faint:   #4E6B72;
  --color-primary:      #8AABB4;
  --color-divider:      rgba(138, 171, 180, 0.12);
  --color-border:       rgba(138, 171, 180, 0.18);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:           #1A2426;
    --color-surface:      #1F2C2F;
    --color-text:         #C8D8DC;
    --color-text-muted:   #7A9BA3;
    --color-text-faint:   #4E6B72;
    --color-primary:      #8AABB4;
    --color-divider:      rgba(138, 171, 180, 0.12);
    --color-border:       rgba(138, 171, 180, 0.18);
  }
}

/* ============================
   Page Layout
   ============================ */
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  overflow: hidden;
  position: relative;
}

/* Subtle background texture */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  pointer-events: none;
  z-index: 0;
}

/* ============================
   Main Content
   ============================ */
.coming-soon {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  padding: var(--space-8);
  text-align: center;
  max-width: 600px;
}

/* Logo Image */
.logo-image {
  max-width: 420px;
  width: 100%;
  height: auto;
  opacity: 0;
  animation: fadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

/* Dark mode: invert the logo for visibility */
[data-theme="dark"] .logo-image {
  filter: brightness(0.7) contrast(1.2);
}

/* Divider */
.divider {
  width: 48px;
  height: 1px;
  background: var(--color-divider);
  border: none;
  opacity: 0;
  animation: fadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
}

/* Coming Soon text */
.status {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-sm);
  letter-spacing: 0.25em;
  color: var(--color-text-faint);
  text-transform: uppercase;
  opacity: 0;
  animation: fadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.1s forwards;
}

/* Theme toggle */
.theme-toggle {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 10;
  color: var(--color-text-faint);
  transition: color var(--transition-interactive);
  opacity: 0;
  animation: fadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.6s forwards;
  padding: var(--space-2);
}

.theme-toggle:hover {
  color: var(--color-text-muted);
}

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

/* ============================
   Responsive
   ============================ */
@media (max-width: 480px) {
  .logo-image {
    max-width: 280px;
  }
  
  .coming-soon {
    gap: var(--space-8);
  }
}