spazio-solazzo/assets/css/app.css

/* See the Tailwind configuration guide for advanced usage
   https://tailwindcss.com/docs/configuration */

@import "tailwindcss" source(none);
@source "../../deps/ash_authentication_phoenix";
@source "../css";
@source "../js";
@source "../../lib/spazio_solazzo_web";

/* A Tailwind plugin that makes "hero-#{ICON}" classes available.
   The heroicons installation itself is managed by your mix.exs */
@plugin "../vendor/heroicons";

/* daisyUI Tailwind Plugin. You can update this file by fetching the latest version with:
   curl -sLO https://github.com/saadeghi/daisyui/releases/latest/download/daisyui.js
   Make sure to look at the daisyUI changelog: https://daisyui.com/docs/changelog/ */
@plugin "../vendor/daisyui" {
  themes: false;
}

/* daisyUI theme plugin. You can update this file by fetching the latest version with:
  curl -sLO https://github.com/saadeghi/daisyui/releases/latest/download/daisyui-theme.js
  We ship with two themes, a light one inspired on Phoenix colors and a dark one inspired
  on Elixir colors. Build your own at: https://daisyui.com/theme-generator/ */
@plugin "../vendor/daisyui-theme" {
  name: "dark";
  default: false;
  prefersdark: true;
  color-scheme: "dark";
  --color-base-100: #1a1a1a;
  --color-base-200: #2a2a2a;
  --color-base-300: #3a3a3a;
  --color-base-content: #e5e5e5;
  --color-primary: #c85a6e;
  --color-primary-content: #ffffff;
  --color-secondary: #7bb8db;
  --color-secondary-content: #ffffff;
  --color-accent: #95c5db;
  --color-accent-content: #ffffff;
  --color-neutral: #9ca3af;
  --color-neutral-content: #e5e5e5;
  --color-info: #7bb8db;
  --color-info-content: #ffffff;
  --color-success: oklch(65% 0.14 150);
  --color-success-content: #ffffff;
  --color-warning: oklch(75% 0.18 50);
  --color-warning-content: #1a1a1a;
  --color-error: oklch(65% 0.22 25);
  --color-error-content: #ffffff;
  --color-background-dark: #2b1220;
  --color-card-dark: #1a3c34;
  --color-text-primary-dark: #ffffff;
  --color-text-secondary-dark: #d4c5b0;
  --color-border-dark: #5e503f;
  --radius-selector: 1rem;
  --radius-field: 1rem;
  --radius-box: 1.5rem;
  --size-selector: 0.21875rem;
  --size-field: 0.21875rem;
  --border: 1.5px;
  --depth: 1;
  --noise: 0;
}

@plugin "../vendor/daisyui-theme" {
  name: "light";
  default: true;
  prefersdark: false;
  color-scheme: "light";
  --color-base-100: #ffffff;
  --color-base-200: #f3f4f6;
  --color-base-300: #d4c5b0;
  --color-base-content: #2b1220;
  --color-primary: #ac485a;
  --color-primary-content: #ffffff;
  --color-secondary: #63a5c9;
  --color-secondary-content: #ffffff;
  --color-accent: #7fafc9;
  --color-accent-content: #ffffff;
  --color-neutral: #5e503f;
  --color-neutral-content: #ffffff;
  --color-info: #63a5c9;
  --color-info-content: #ffffff;
  --color-success: oklch(70% 0.14 140);
  --color-success-content: oklch(98% 0.01 140);
  --color-warning: oklch(78% 0.18 45);
  --color-warning-content: oklch(20% 0.02 45);
  --color-error: oklch(58% 0.2 20);
  --color-error-content: oklch(96% 0.01 20);
  --color-background-light: #ffffff;
  --color-card-light: #ffffff;
  --color-text-primary-light: #2b1220;
  --color-text-secondary-light: #5e503f;
  --color-border-light: #f3f4f6;
  --radius-selector: 1rem;
  --radius-field: 1rem;
  --radius-box: 1.5rem;
  --size-selector: 0.21875rem;
  --size-field: 0.21875rem;
  --border: 1.5px;
  --depth: 1;
  --noise: 0;
}

/* Add variants based on LiveView classes */
@custom-variant phx-click-loading (.phx-click-loading&, .phx-click-loading &);
@custom-variant phx-submit-loading (.phx-submit-loading&, .phx-submit-loading &);
@custom-variant phx-change-loading (.phx-change-loading&, .phx-change-loading &);

/* Use the data attribute for dark mode  */
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

/* Make LiveView wrapper divs transparent for layout */
[data-phx-session],
[data-phx-teleported-src] {
  display: contents;
}

/* This file is for your main application CSS */

/* New Design Color Palette - Spazio Solazzo Theme */
@theme {
  /* Typography */
  --font-display: "Montserrat", sans-serif;
  --font-brand: "Montserrat", sans-serif;
}

/* Global Typography & Styles */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-display);
  background-color: white;
  color: var(--color-text-primary-light);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 700;
}

.prose {
  font-family: var(--font-display);
}

/* Logo Styles */
.hero-logo-img {
  max-width: 100%;
  height: auto;
  max-height: 300px;
  display: block;
  margin: 0 auto;
}

/* Spazio Solazzo Color Utility Classes */
/* These map to DaisyUI theme colors for easy maintenance */
.text-plum {
  color: var(--color-primary);
}

.text-plum-light {
  color: #b16788;
}

.text-plum-dark {
  color: var(--color-base-content);
}

.text-sky-accent {
  color: var(--color-secondary);
}

.text-sky-accent-light {
  color: var(--color-accent);
}

.text-earth {
  color: var(--color-neutral);
}

.text-oak {
  color: var(--color-base-300);
}

.bg-plum {
  background-color: var(--color-primary);
}

.bg-sky-accent {
  background-color: var(--color-secondary);
}

.bg-sky-accent-light {
  background-color: var(--color-accent);
}

.bg-earth {
  background-color: var(--color-neutral);
}

.border-plum {
  border-color: var(--color-primary);
}

.border-sky-accent {
  border-color: var(--color-secondary);
}

.hover\:bg-plum-light:hover {
  background-color: #b16788;
}

.hover\:text-plum:hover {
  color: var(--color-primary);
}

/* Fix label-text color in dark mode */
.label-text {
  color: var(--color-base-content);
}