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: oklch(25% 0.015 200);
  --color-base-200: oklch(20% 0.012 200);
  --color-base-300: oklch(15% 0.01 200);
  --color-base-content: oklch(95% 0.01 200);
  --color-primary: oklch(58% 0.15 180);
  --color-primary-content: oklch(98% 0.01 180);
  --color-secondary: oklch(58% 0.15 180);
  --color-secondary-content: oklch(98% 0.01 180);
  --color-accent: oklch(60% 0.12 175);
  --color-accent-content: oklch(98% 0.01 175);
  --color-neutral: oklch(30% 0.02 200);
  --color-neutral-content: oklch(98% 0.01 200);
  --color-info: oklch(58% 0.158 241.966);
  --color-info-content: oklch(97% 0.013 236.62);
  --color-success: oklch(60% 0.118 184.704);
  --color-success-content: oklch(98% 0.014 180.72);
  --color-warning: oklch(66% 0.179 58.318);
  --color-warning-content: oklch(98% 0.022 95.277);
  --color-error: oklch(58% 0.253 17.585);
  --color-error-content: oklch(96% 0.015 12.422);
  --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: oklch(99% 0.005 200);
  --color-base-200: oklch(97% 0.01 200);
  --color-base-300: oklch(93% 0.015 200);
  --color-base-content: oklch(30% 0.02 200);
  --color-primary: oklch(58% 0.15 180);
  --color-primary-content: oklch(98% 0.01 180);
  --color-secondary: oklch(58% 0.15 180);
  --color-secondary-content: oklch(98% 0.01 180);
  --color-accent: oklch(62% 0.12 175);
  --color-accent-content: oklch(98% 0.01 175);
  --color-neutral: oklch(50% 0.02 200);
  --color-neutral-content: oklch(98% 0.01 200);
  --color-info: oklch(62% 0.18 210);
  --color-info-content: oklch(97% 0.01 210);
  --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.20 20);
  --color-error-content: oklch(96% 0.01 20);
  --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 - Mediterranean Blue Theme */
@theme {
  /* Primary - Mediterranean Blue */
  --color-primary: #0ea5e9;
  --color-primary-hover: #0284c7;

  /* Accent - Sicilian Lemon/Sun */
  --color-accent: #facc15;

  /* Light Mode Colors */
  --color-background-light: #f8fafc;
  --color-card-light: #ffffff;
  --color-text-primary-light: #0f172a;
  --color-text-secondary-light: #334155;
  --color-border-light: #e2e8f0;

  /* Dark Mode Colors */
  --color-background-dark: #0f172a;
  --color-card-dark: #1e293b;
  --color-text-primary-dark: #f1f5f9;
  --color-text-secondary-dark: #94a3b8;
  --color-border-dark: #334155;

  /* Slate Scale for consistency */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;

  /* Sky Scale for primary variations */
  --color-sky-100: #e0f2fe;
  --color-sky-400: #38bdf8;
  --color-sky-500: #0ea5e9;
  --color-sky-600: #0284c7;

  /* Yellow Scale for accent */
  --color-yellow-100: #fef9c3;
  --color-yellow-300: #fde047;
  --color-yellow-400: #facc15;
  --color-yellow-600: #ca8a04;
  --color-yellow-700: #a16207;
  --color-yellow-900: #713f12;

  /* Typography */
  --font-display: 'Inter', 'Montserrat', sans-serif;
}

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

body {
  font-family: var(--font-display);
}

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

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