@import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';

@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../vendor/laravel/jetstream/**/*.blade.php';

@theme {
    --font-sans: Inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

    --color-jet: #33312e;
    --color-pumpkin: #FE7F2D;
    --color-olivine: #A1C181;

    --color-cornflower: #8ecae6;
    --color-pacific: #219ebc;
    --color-elephant: #023047;
    --color-selective: #ffb703;
    --color-gold-drop: #fb8500;

    --color-jet-50: #f6f5f5;
    --color-jet-100: #e8e6e5;
    --color-jet-200: #d3d0ce;
    --color-jet-300: #b5afab;
    --color-jet-400: #8f8781;
    --color-jet-500: #746c66;
    --color-jet-600: #635e57;
    --color-jet-700: #53504b;
    --color-jet-800: #484542;
    --color-jet-900: #3f3d3a;
    --color-jet-950: #33312e;

    --color-pumpkin-50: #fff6ed;
    --color-pumpkin-100: #ffebd4;
    --color-pumpkin-200: #ffd2a9;
    --color-pumpkin-300: #ffb272;
    --color-pumpkin-400: #FE7F2D;
    --color-pumpkin-500: #fd6412;
    --color-pumpkin-600: #ee4a08;
    --color-pumpkin-700: #c53509;
    --color-pumpkin-800: #9c2b10;
    --color-pumpkin-900: #7e2610;
    --color-pumpkin-950: #440f06;

    --color-olivine-50: #f3f7ee;
    --color-olivine-100: #e4edda;
    --color-olivine-200: #ccdeb8;
    --color-olivine-300: #a1c181;
    --color-olivine-400: #8cb16a;
    --color-olivine-500: #6f964c;
    --color-olivine-600: #55763a;
    --color-olivine-700: #435b30;
    --color-olivine-800: #384a2a;
    --color-olivine-900: #324027;
    --color-olivine-950: #182211;

    --color-cornflower-50: #f2f9fd;
    --color-cornflower-100: #e5f1f9;
    --color-cornflower-200: #c5e3f2;
    --color-cornflower-300: #8ecae6;
    --color-cornflower-400: #58b2d8;
    --color-cornflower-500: #3298c5;
    --color-cornflower-600: #237ba6;
    --color-cornflower-700: #1d6187;
    --color-cornflower-800: #1c5370;
    --color-cornflower-900: #1c465e;
    --color-cornflower-950: #132d3e;

    --color-pacific-50: #eefbfd;
    --color-pacific-100: #d5f3f8;
    --color-pacific-200: #b0e7f1;
    --color-pacific-300: #7ad5e6;
    --color-pacific-400: #3cb9d4;
    --color-pacific-500: #219ebc;
    --color-pacific-600: #1e7e9c;
    --color-pacific-700: #1f657f;
    --color-pacific-800: #215569;
    --color-pacific-900: #204659;
    --color-pacific-950: #102e3c;

    --color-elephant-50: #effaff;
    --color-elephant-100: #ddf5ff;
    --color-elephant-200: #b4edff;
    --color-elephant-300: #72e0ff;
    --color-elephant-400: #27d2ff;
    --color-elephant-500: #00bdfc;
    --color-elephant-600: #0098d9;
    --color-elephant-700: #0079af;
    --color-elephant-800: #006690;
    --color-elephant-900: #035477;
    --color-elephant-950: #023047;

    --color-selective-50: #fffeea;
    --color-selective-100: #fff9c5;
    --color-selective-200: #fff485;
    --color-selective-300: #ffe746;
    --color-selective-400: #ffd71b;
    --color-selective-500: #ffb703;
    --color-selective-600: #e28b00;
    --color-selective-700: #bb6202;
    --color-selective-800: #984b08;
    --color-selective-900: #7c3e0b;
    --color-selective-950: #481f00;

    --color-gold-drop-50: #fffbec;
    --color-gold-drop-100: #fff5d3;
    --color-gold-drop-200: #ffe8a5;
    --color-gold-drop-300: #ffd56d;
    --color-gold-drop-400: #ffb732;
    --color-gold-drop-500: #ff9f0a;
    --color-gold-drop-600: #fb8500;
    --color-gold-drop-700: #cc6302;
    --color-gold-drop-800: #a14c0b;
    --color-gold-drop-900: #82400c;
    --color-gold-drop-950: #461e04;
}

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

[x-cloak] {
    display: none;
}