Consolidate themes using tailwind

[Tailwind doc - theme](https://v3.tailwindcss.com/docs/theme)
[Tailwind doc - dark mode](https://v3.tailwindcss.com/docs/dark-mode)

Tailwind is compatible by default with dark class. We can keep our dark mode control in `` and tailwind will apply the `dark:*` directives out of the box e.g: `dark:text-red-500`.

As we don't have `` components that would include the theming, getting rid one-shot of the dark scss we would have to add the `dark:text-white` to all our `

` tags.

## DoD
With our current implementation a pragmatic progressive approach would be the following:
- [ ] Migrate base tokens from `_variables.scss` into `tailwind.config.js` (to be able to re-use them)
- [ ] Re-create the base flagsmith theme
- [ ] Add the fundamentals of the dark mode into the dark theme
For the sake of time, let's focus on the lowest common denominators (

/ etc) + global theming and not try to do too much without a clear purpose.

## Migration rules of thumb
Migrating and cleaning-up classes should be done if the class:
- applies styles to 3rd party lib (this cannot be migrated)
- is not complex
- not too nested
- not used more than 3 times (to avoid infinite regression testing)

The class must be moved into the theme if it is applied on global elements e.g
```
body {
line-height: inherit !important;
}
```

or inline if it applies basic styles:
```
.metric-value {
font-size: 16px;
font-weight: 500;
margin: 0;
}

.button-dropdown {
display: inline-flex;
vertical-align: middle;

.button-dropdown-default {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}

.button-dropdown-toggle {
border-bottom-left-radius: 0;
border-top-left-radius: 0;

padding-left: 2px;
padding-right: 2px;
}
}
```

## How to
Create tokens in tailwind.config.js
```
theme: {
extend: {
borderRadius: { -> Example of overriding a tailwind directive (rounded-xx) in this case with our own values
DEFAULT: '6px',
'lg': '8px',
'sm': '4px',
'xlg': '10px',
},

colors: {
'text-light-mode': '#000'
'text-dark-mode': '#FFF'
'primary': '#656d7b', -> can be used "text-color-primary" "bg-color-primary"
'icon-light': '#ffffff',
'icon-light-grey': 'rgba(157, 164, 174, 1)',
},
```
Create base themes
```
In a theme.css file:
:root { ->
--text-primary: theme('colors.text-light-mode');
}

.dark {
--text-primary: theme('colors.text-dark-mode'); -> override the token under dark-mode
}

@layer base {
p {
color: var(--text-primary);
}
}
```
Example with red and yellow

Variables is a very exhaustive file, with a lot of tokenized variables. A lot of them are used only once, cf:
```
$info-solid-dark-alert: rgba(15, 32, 52);

// Used in
.alert-info {
background-color: $info-solid-dark-alert;
.title {
color: $text-icon-light;
}
a {
color: $primary;
}
strong {
color: $text-icon-light;
}
}
// Used once too

Start by reviewing `_variables.scss` and `tailwind.config.js`, then inventory the base tokens and theme usages described in the issue. Check the proposed `theme.css` structure and the global elements and class examples before planning the migration. Done means base tokens, the Flagsmith theme, and dark-mode fundamentals are represented in Tailwind while the stated migration rules are followed.

Written by the indexing model from the issue text.