:root {
   /* colors */
   --flixy-black: #1a1a1a;
   --flixy-black-100: #353535;
   --flixy-white: #f6f6f6;
   --flixy-white-100: #f8fbfc;
   --flixy-primary: #7b028a;
   --flixy-primary-100: #9130eb;
   --flixy-gray: #e6e6e6;
   --flixy-yellow: #fdc519;

   /* Daisy UI */

   --flixy-ds-base-content: oklch(23.574% 0.066 313.189);
   --flixy-ds-color-primary: var(--flixy-primary);
   --flixy-ds-base-100: oklch(97.788% 0.004 56.375);
   --flixy-ds-base-200: oklch(93.982% 0.007 61.449);
   --flixy-ds-base-300: oklch(91.586% 0.006 53.44);
   --flixy-ds-color-neutral: oklch(27% 0.006 286.033);
   --flixy-ds-neutral-content: oklch(92% 0.004 286.32);
   --flixy-ds-color-success: oklch(69% 0.17 162.48);
   --flixy-ds-color-success-content: oklch(26% 0.051 172.552);
   --flixy-ds-color-info: oklch(68% 0.169 237.323);
   --flixy-ds-color-info-content: oklch(29% 0.066 243.157);
   --flixy-ds-color-warning: oklch(79% 0.184 86.047);
   --flixy-ds-color-warning-content: oklch(28% 0.066 53.813);
   --flixy-ds-color-error: oklch(64% 0.246 16.439);
   --flixy-ds-color-error-content: oklch(27% 0.105 12.094);

   /* layout */
   --background: var(--flixy-white);
   --foreground: oklch(var(--bc));

   --flixy-default-bg-input: #f8fbfc;
   --flixy-default-b-input: #303131;
   --flixy-default-text-input: #303131;
   --flixy-default-text-secondary: #8f8f8f;

   --flixy-default-label-color: --color-gray-200;
   --flixy-color-primary: var(--flixy-primary);

   /* defaults */
   --text-default: var(--flixy-white);

   /* header */
   --h-header: 60px;
   --bg-header: var(--flixy-primary);
   --border-header: var(--flixy-primary-100);
   --text-header: var(--flixy-white);
   --text-hover-header: var(--flixy-yellow);
   --youflix-logo-size: 60px;
   /* navigation */
   --text-navigation-item: var(--flixy-black);
   --text-hover-navigation-item: var(--flixy-yellow);

   /* login */
   --bg-login-card: var(--flixy-primary);
   --b-login-card: var(--flixy-primary-100);
   --text-login-card: var(--flixy-white);

   --bg-login-forecard: var(--flixy-yellow);
   --b-login-forecard: var(--flixy-yellow);
   --text-login-forecard: var(--flixy-black);

   --bg-login-button: var(--flixy-white-100);
   --b-login-button: var(--flixy-white);
   --text-login-button: var(--flixy-black);
   --bg-login-button-hover: var(--flixy-white);

   --login-divider: var(--flixy-white);

   --h-login-logo: 60px;

   --bg-input-login-email: var(--flixy-default-bg-input);
   --text-input-login-email: var(--flixy-default-text-input);
   --bg-input-login-password: var(--flixy-default-bg-input);
   --text-input-login-password: var(--flixy-default-text-input);

   /* register */
   --bg-register-card: var(--flixy-primary);
   --b-register-card: var(--flixy-primary-100);
   --text-register-card: var(--flixy-white);
   --bg-register-forecard: var(--flixy-yellow);
   --b-register-forecard: var(--flixy-yellow);
   --text-register-forecard: var(--flixy-black);
   --bg-register-button: var(--flixy-white-100);
   --b-register-button: var(--flixy-white);
   --text-register-button: var(--flixy-black);
   --bg-register-button-hover: var(--flixy-white);
   --register-divider: var(--flixy-white);

   /* google button */
   --text-google: var(--flixy-white);
   --text-hover-google: var(--flixy-primary);
   --bg-google: hsla(0, 0%, 100%, 0);
   --bg-hover-google: var(--flixy-black-100);
   --b-google: var(--flixy-black-100);
   --b-hover-google: var(--flixy-black-100);

   /* profile */
   --text-profile: var(--flixy-white);
   --text-hover-profile: var(--flixy-yellow);
   --b-profile: var(--flixy-black-100);
   /* menu profile */
   --text-menu-burger: var(--flixy-white);
   --bg-menu-profile: var(--flixy-primary);
   --bg-hover-menu-profile: var(--flixy-primary-100);
   --text-menu-profile: var(--flixy-white);
   /* hero section */
   --text-video-controls: var(--flixy-white);
   --text-hs-title: var(--flixy-white);
   --text-hs-subtitle: var(--flixy-white);
   --bg-hs-cta: var(--flixy-primary);
   --text-hs-cta: var(--flixy-white);
   --bg-hs-hover-cta: var(--flixy-primary-100);
   /* vitrine container */
   --bg-vitrine: var(--flixy-white);
   --text-vitrine-title: var(--flixy-black);
   /* bar progress */
   --bg-course-barprogress: var(--flixy-gray);
   --b-course-barprogress: var(--flixy-black);

   /* footer */
   --b-footer: var(--flixy-black-100);
   --bg-footer: var(--background);
   --text-footer: var(--flixy-black);

   /* faq */
   --text-faq-title: var(--flixy-black);
   --text-faq-question: var(--flixy-black);
   --text-faq-answer: var(--flixy-black);
   --bg-faq-accordion: var(--flixy-white);
   --b-faq-accordion: var(--flixy-white);
   --bg-faq: transparent;

   /* course */
   --text-course-title: var(--flixy-black);
   --text-course-description: var(--flixy-black);
   --text-course-lesson: var(--flixy-black);
   --text-course-lesson-hover: var(--flixy-black-100);
   --text-course-lesson-disabled: var(--flixy-gray);
   --bg-course-lesson: transparent;
   --bg-course-lesson-hover: var(--flixy-white-100);
   --text-course-done: #00a96e;
   --text-hover-course-done: #00a96e;
   --b-course-done: #00a96e;
   --text-course-todo: var(--flixy-black);
   --text-hover-course-todo: #a90000;
   --b-course-todo: var(--flixy-white);
   --card-shadow-color: #252525;

   /* markdown */
   --text-markdown: var(--flixy-black);
   --h1-mb-markdown: 0.5rem;
   --h2-mb-markdown: 0.5rem;
   --p-mb-markdown: 0.5rem;
   --ul-mb-markdown: 0.5rem;
   --li-mb-markdown: 0.5rem;
   --strong-mb-markdown: 0.5rem;
   --a-mb-markdown: 0.5rem;

   /* vitrine timeline */
   --text-course-showcase-title: var(--flixy-black);
   --text-course-modulo-title: var(--flixy-black);
   --text-course-modulo-title-sel: var(--flixy-primary);
   --text-course-modulo-icon-check: var(--flixy-black);
   --text-course-modulo-icon-play: var(--flixy-black);
   --b-course-timeline: var(--flixy-black-100);

   /* images uploading */
   --bg-imagesupload-delete-button: var(--flixy-white);
}

.flixy-file-input-primary {
   --btn-color: var(--flixy-default-bg-input);
   &::file-selector-button {
      color: var(--flixy-default-text-input);
   }
   &,
   &:focus,
   &:focus-within {
      --input-color: var(--flixy-default-bg-input);
   }
}

.flixy-file-input {
   &:focus {
      --input-color: var(--flixy-default-text-input);
      box-shadow: 0 1px color-mix(in oklab, var(--flixy-default-bg-input) 10%, #0000);
      outline: 2px solid var(--flixy-default-bg-input);
      outline-offset: 2px;
      isolation: isolate;
   }
}

.timeline-progress::-webkit-progress-value {
   background-color: var(--flixy-white);
}

.timeline-progress {
   background-color: var(--flixy-black-100);
}

.flixy-vitrina-container > div:first-child {
   margin-top: 1rem;
}