@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

/* ============================================================
   SUISSE Virtual — Merlot
   One theme, declared on :root and .dark so it renders the same
   whether or not the app sets the class.

   Merlot          #340D1A   surfaces: board, tiles, header, ground
   Cappucino Foam  #F6F3E8   floating layer, primary actions, body text
   Vanilla Latte   #B5A391   chips, dividers, secondary text
   Pantone 9081 C  #DFDCD4   hover and dividers on the foam layer

   Every in-page surface resolves to the same wine, so it does not
   matter which token a component reaches for. Foam appears only on
   layers that float above the page.

   One accent, --lx-accent, drives every highlight in the app —
   page hovers, selected rows, and the primary action inside
   floating panels. Nothing else introduces a second red.
   ============================================================ */

:root,
.dark {
  /* Palette anchors */
  --lx-merlot: oklch(0.23 0.064 3);
  --lx-foam: oklch(0.963 0.015 94);
  --lx-latte: oklch(0.726 0.033 67);
  --lx-stone: oklch(0.895 0.011 90);

  /* The single accent, a lifted merlot */
  --lx-accent: oklch(0.365 0.105 5);
  --lx-accent-hover: oklch(0.418 0.118 5);

  --background: oklch(0.135 0.045 3);
  --foreground: var(--lx-foam);

  /* All in-page surfaces share the merlot */
  --card: var(--lx-merlot);
  --card-foreground: var(--lx-foam);

  --popover: var(--lx-merlot);
  --popover-foreground: var(--lx-foam);

  /* Primary action — foam on wine */
  --primary: var(--lx-foam);
  --primary-foreground: oklch(0.222 0.075 3);

  /* Flight-number chips — latte pill, merlot text.
     These repeat down every row, which is where the taupe earns
     its place in the palette rather than hiding in one subtitle. */
  --secondary: var(--lx-latte);
  --secondary-foreground: oklch(0.198 0.068 3);

  /* Table header band, and secondary text on the page */
  --muted: oklch(0.188 0.055 3);
  --muted-foreground: oklch(0.748 0.045 66);

  /* Hover and selected states across the page */
  --accent: var(--lx-accent);
  --accent-foreground: oklch(0.978 0.012 92);

  --destructive: oklch(0.522 0.192 18);
  --destructive-foreground: oklch(0.982 0.01 92);

  --success: oklch(0.688 0.128 150);
  --success-foreground: oklch(0.175 0.05 150);

  /* Dividers in warm taupe rather than wine — a hairline of the
     third colour running the full width of every table */
  --border: oklch(0.412 0.028 58);
  --input: oklch(0.176 0.05 3);
  --ring: var(--lx-accent-hover);

  --overlay: oklch(0.082 0.038 3 / 0.75);

  --panel-background: var(--lx-merlot);
  --panel-foreground: var(--lx-foam);
  --panel-primary: var(--lx-foam);
  --panel-primary-foreground: oklch(0.222 0.075 3);
  --panel-accent: var(--lx-accent);
  --panel-accent-foreground: oklch(0.978 0.012 92);
  --panel-border: oklch(0.412 0.028 58);
  --panel-ring: var(--lx-accent-hover);

  --dropdown-background: var(--lx-merlot);
  --dropdown-foreground: var(--lx-foam);

  --nav-hover: oklch(0.272 0.078 3);

  /* --- Foam, used only by the floating layer below --- */
  --float-background: var(--lx-foam);
  --float-foreground: oklch(0.212 0.07 3);
  --float-primary: var(--lx-accent);
  --float-primary-foreground: oklch(0.982 0.012 92);
  --float-accent: var(--lx-stone);
  --float-accent-foreground: oklch(0.228 0.075 3);
  --float-muted: oklch(0.928 0.013 92);
  --float-muted-foreground: oklch(0.448 0.048 12);
  --float-border: oklch(0.862 0.014 88);
  --float-input: oklch(0.992 0.006 94);
  --float-ring: var(--lx-accent);
}

/* ============================================================
   Floating layer

   Popovers, dropdowns, selects, menus and dialogs sit on foam.
   Rather than depend on any one token, this redefines the whole
   set for that subtree, so whichever background and text tokens
   the component happens to use, they resolve to foam values.
   The highlight is --lx-accent, the same one used on the page.
   ============================================================ */

[data-radix-popper-content-wrapper],
[data-slot='popover-content'],
[data-slot='dropdown-menu-content'],
[data-slot='select-content'],
[data-slot='dialog-content'],
[data-slot='command'],
[role='dialog'],
[role='menu'],
[role='listbox'],
.panel-surface {
  --background: var(--float-background);
  --foreground: var(--float-foreground);
  --card: var(--float-background);
  --card-foreground: var(--float-foreground);
  --popover: var(--float-background);
  --popover-foreground: var(--float-foreground);
  --primary: var(--float-primary);
  --primary-foreground: var(--float-primary-foreground);
  --secondary: var(--float-accent);
  --secondary-foreground: var(--float-accent-foreground);
  --muted: var(--float-muted);
  --muted-foreground: var(--float-muted-foreground);
  --accent: var(--float-accent);
  --accent-foreground: var(--float-accent-foreground);
  --border: var(--float-border);
  --input: var(--float-input);
  --ring: var(--float-ring);
  --panel-background: var(--float-background);
  --panel-foreground: var(--float-foreground);
  --panel-primary: var(--float-primary);
  --panel-primary-foreground: var(--float-primary-foreground);
  --panel-accent: var(--float-accent);
  --panel-accent-foreground: var(--float-accent-foreground);
  --panel-border: var(--float-border);
  --panel-ring: var(--float-ring);
  --dropdown-background: var(--float-background);
  --dropdown-foreground: var(--float-foreground);
  --nav-hover: var(--float-accent);

  color: var(--float-foreground);
}

/* The wrapper itself carries no background of its own, so the
   foam is painted here for anything that relies on it */
[data-radix-popper-content-wrapper] > *,
.panel-surface {
  background-color: var(--float-background);
}

/* Fields on a foam sheet are nearly the same value as the sheet,
   so they need a visible edge */
[data-radix-popper-content-wrapper] :is(input, textarea, select, button),
[data-slot='popover-content'] :is(input, textarea, select, button),
[data-slot='dialog-content'] :is(input, textarea, select, button),
[role='dialog'] :is(input, textarea, select, button),
.panel-surface :is(input, textarea, select, button) {
  border-color: var(--float-border);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-panel: var(--panel-background);
  --color-panel-foreground: var(--panel-foreground);
  --color-panel-primary: var(--panel-primary);
  --color-panel-primary-foreground: var(--panel-primary-foreground);
  --color-panel-accent: var(--panel-accent);
  --color-panel-accent-foreground: var(--panel-accent-foreground);
  --color-panel-border: var(--panel-border);
  --color-panel-ring: var(--panel-ring);
  --color-dropdown: var(--dropdown-background);
  --color-dropdown-foreground: var(--dropdown-foreground);
  --color-overlay: var(--overlay);
  --color-nav-hover: var(--nav-hover);
}