@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');
@import "tailwindcss/theme.css" prefix(babylai);
@import "tailwindcss/utilities.css" prefix(babylai);

/* CSS Custom Properties - Light Theme (Default) */
:root {
  --babylai-font-sans: "Cairo", sans-serif;
  --babylai-black-white-50: #ffffff;
  --babylai-black-white-100: #f3f3f3;
  --babylai-black-white-200: #e2e2e2;
  --babylai-black-white-300: #919191;
  --babylai-black-white-400: #606060;
  --babylai-black-white-500: #333333;
  --babylai-black-white-600: #1f1f1f;
  --babylai-black-white-700: #171717;
  --babylai-black-white-800: #0a0a0a;
  --babylai-black-white-900: #050505;
  --babylai-black-white-950: #000000;
  --babylai-black-white-default: #333333;
  --babylai-primary-color: #ad49e1;
  --babylai-primary-color-100: #f6ecfc;
  --babylai-primary-color-200: #deb6f3;
  --babylai-primary-color-300: #d49cee;
  --babylai-primary-color-400: #c57fea;
  --babylai-primary-color-500: #ad49e1;
  --babylai-primary-color-600: #672b87;
  --babylai-primary-color-700: #451d5a;
  --babylai-primary-color-800: #220e2d;
  --babylai-primary-color-900: #110716;
  --babylai-primary-color-950: #0a0310;

  --babylai-background: var(--babylai-black-white-50);
  --babylai-card: var(--babylai-black-white-50);
  --babylai-card-foreground: var(--babylai-black-white-500);
  --babylai-secondary: var(--babylai-black-white-100);
  --babylai-secondary-foreground: var(--babylai-black-white-500);
  --babylai-muted: var(--babylai-black-white-100);
  --babylai-muted-foreground: var(--babylai-black-white-400);
  --babylai-destructive: #ef4444;
  --babylai-destructive-foreground: var(--babylai-black-white-50);
  --babylai-border: var(--babylai-black-white-200);
  --babylai-ring: var(--babylai-primary-color);
  --babylai-radius: 0.5rem;
}

@theme {
  --font-sans: "Cairo", sans-serif;

  --color-primary: var(--babylai-primary-color);
  --color-primary-100: var(--babylai-primary-color-100);
  --color-primary-200: var(--babylai-primary-color-200);
  --color-primary-300: var(--babylai-primary-color-300);
  --color-primary-400: var(--babylai-primary-color-400);
  --color-primary-500: var(--babylai-primary-color-500);
  --color-primary-600: var(--babylai-primary-color-600);
  --color-primary-700: var(--babylai-primary-color-700);
  --color-primary-800: var(--babylai-primary-color-800);
  --color-primary-900: var(--babylai-primary-color-900);
  --color-primary-950: var(--babylai-primary-color-950);

  --color-background: var(--babylai-background);
  --color-card: var(--babylai-card);
  --color-card-foreground: var(--babylai-card-foreground);
  --color-secondary: var(--babylai-secondary);
  --color-secondary-foreground: var(--babylai-secondary-foreground);
  --color-muted: var(--babylai-muted);
  --color-muted-foreground: var(--babylai-muted-foreground);
  --color-destructive: var(--babylai-destructive);
  --color-destructive-foreground: var(--babylai-destructive-foreground);
  --color-border: var(--babylai-border);
  --color-ring: var(--babylai-ring);

  --color-black-white-50: var(--babylai-black-white-50);
  --color-black-white-100: var(--babylai-black-white-100);
  --color-black-white-200: var(--babylai-black-white-200);
  --color-black-white-300: var(--babylai-black-white-300);
  --color-black-white-400: var(--babylai-black-white-400);
  --color-black-white-500: var(--babylai-black-white-500);
  --color-black-white-600: var(--babylai-black-white-600);
  --color-black-white-700: var(--babylai-black-white-700);
  --color-black-white-800: var(--babylai-black-white-800);
  --color-black-white-900: var(--babylai-black-white-900);
  --color-black-white-950: var(--babylai-black-white-950);

  --animate-wave: wave 1.3s ease-in-out infinite;
  --animate-circular-progress: circular-progress 2s ease-in-out infinite;
  --animate-float: float 3s infinite ease-in-out;

  @keyframes wave {
    0%, 60%, 100% { transform: initial; }
    30% { transform: translateY(-10px); }
  }

  @keyframes circular-progress {
    0% { stroke-dashoffset: 100.48; }
    50% { stroke-dashoffset: 25.12; }
    100% { stroke-dashoffset: 100.48; }
  }

  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }

  @keyframes typing-dot {
    0%, 60%, 100% {
      opacity: 0.35;
      transform: scale(0.85);
    }
    30% {
      opacity: 1;
      transform: scale(1);
    }
  }
}

.babylai-typing-dot {
  animation: typing-dot 1.4s ease-in-out infinite;
}
.babylai-typing-dot:nth-child(1) { animation-delay: 0ms; }
.babylai-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.babylai-typing-dot:nth-child(3) { animation-delay: 0.4s; }

.babylai-theme-root {
  --babylai-color-primary: var(--babylai-primary-color);
  --babylai-color-primary-100: var(--babylai-primary-color-100);
  --babylai-color-primary-200: var(--babylai-primary-color-200);
  --babylai-color-primary-300: var(--babylai-primary-color-300);
  --babylai-color-primary-400: var(--babylai-primary-color-400);
  --babylai-color-primary-500: var(--babylai-primary-color-500);
  --babylai-color-primary-600: var(--babylai-primary-color-600);
  --babylai-color-primary-700: var(--babylai-primary-color-700);
  --babylai-color-primary-800: var(--babylai-primary-color-800);
  --babylai-color-primary-900: var(--babylai-primary-color-900);
  --babylai-color-primary-950: var(--babylai-primary-color-950);
  --ring: var(--babylai-primary-color);
  --color-ring: var(--babylai-primary-color);
  font-family: var(--babylai-font-sans);

  * { box-sizing: border-box; }
  button { font: inherit; }
  input, textarea { font-family: inherit; }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  h1, h2, h3, h4, h5, h6, p { margin: 0; }
  ul, ol {
    list-style: auto;
    padding-inline-start: 40px;
    margin-block-start: 1rem;
    margin-block-end: 1rem;
  }
}

.bg-header {
  background: linear-gradient(
    171deg,
    color-mix(in srgb, var(--babylai-primary-color) 25%, transparent) -131.06%,
    color-mix(in srgb, var(--babylai-black-white-50) 25%, transparent) 89.82%
  );
}
