/* The Lucia project.
   Copyright 2023-2026 DSP, inc.  All rights reserved.
   Authors:
     chiayin.kuo@dsp.im (chiayin), 2023/1/31
     imacat.yang@dsp.im (imacat), 2026/3/6

   Tailwind CSS theme configuration with custom colors,
   font sizes, breakpoints, and animations. */

/* Import Google fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

@import "tailwindcss" layer(tailwind-base);

@layer tailwind-base, primevue;

@theme {
  --color-*: initial;
  --breakpoint-*: initial;
  --font-size-*: initial;

  --color-transparent: transparent;
  --color-current: currentColor;
  --color-primary: #0099FF;
  --color-secondary: #FFAA44;
  --color-cfm-primary: #0099FF;
  --color-cfm-secondary: #FFAA44;
  --color-neutral-10: #ffffff;
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-300: #cbd5e1;
  --color-neutral-400: #94a3b8;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;
  --color-danger: #FF3366;

  --container-center: true;
  --container-padding: 16px;

  --font-size-xs: 12px;
  --font-size-xs--line-height: 1;
  --font-size-sm: 14px;
  --font-size-sm--line-height: 1;
  --font-size-base: 16px;
  --font-size-base--line-height: 1;
  --font-size-lg: 18px;
  --font-size-lg--line-height: 1;
  --font-size-xl: 20px;
  --font-size-xl--line-height: 1;
  --font-size-2xl: 24px;
  --font-size-2xl--line-height: 1;
  --font-size-3xl: 30px;
  --font-size-3xl--line-height: 1;
  --font-size-4xl: 36px;
  --font-size-4xl--line-height: 1;

  --breakpoint-2xl: 1536px;

  --animate-fadein: fadein 1s ease-in-out;
  --animate-fadeout: fadeout 1s ease-in-out;
  --animate-edit: edit 0.6s ease;
}

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

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

@keyframes edit {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(9deg); }
  75% { transform: rotate(-9deg); }
}
