/*
 * Tema "shoppy" para la tienda (web app). DaisyUI se carga aquí como CSS ya
 * compilado desde CDN, no como plugin de Tailwind, así que un tema nuevo se
 * declara con CSS plano de toda la vida: variables bajo [data-theme="..."],
 * exactamente igual que los temas que trae DaisyUI de fábrica.
 */

[data-theme='shoppy'] {
  color-scheme: light;

  --color-base-100: #fbf8f3;
  --color-base-200: #f1ece2;
  --color-base-300: #e3dbc9;
  --color-base-content: #241f2e;

  --color-primary: #4f46e5;
  --color-primary-content: #ffffff;
  --color-secondary: #d97706;
  --color-secondary-content: #ffffff;
  --color-accent: #0d9488;
  --color-accent-content: #ffffff;
  --color-neutral: #241f2e;
  --color-neutral-content: #f1ece2;

  --color-info: #0ea5e9;
  --color-info-content: #ffffff;
  --color-success: #16a34a;
  --color-success-content: #ffffff;
  --color-warning: #f59e0b;
  --color-warning-content: #241f2e;
  --color-error: #dc2626;
  --color-error-content: #ffffff;

  --radius-box: 1rem;
  --radius-field: 0.65rem;
  --radius-selector: 0.65rem;
  --size-field: 0.25rem;
  --size-selector: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
}

[data-theme='shoppy-dark'] {
  color-scheme: dark;

  --color-base-100: #17151f;
  --color-base-200: #1e1b28;
  --color-base-300: #2b2736;
  --color-base-content: #e9e5da;

  --color-primary: #818cf8;
  --color-primary-content: #1a1550;
  --color-secondary: #fbbf6d;
  --color-secondary-content: #331f00;
  --color-accent: #2dd4bf;
  --color-accent-content: #002620;
  --color-neutral: #e9e5da;
  --color-neutral-content: #17151f;

  --color-info: #38bdf8;
  --color-info-content: #002233;
  --color-success: #4ade80;
  --color-success-content: #002b0c;
  --color-warning: #fbbf24;
  --color-warning-content: #2b1900;
  --color-error: #f87171;
  --color-error-content: #2b0000;

  --radius-box: 1rem;
  --radius-field: 0.65rem;
  --radius-selector: 0.65rem;
  --size-field: 0.25rem;
  --size-selector: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
}

/* Detalles que no dependen de Tailwind/DaisyUI */
::selection {
  background-color: var(--color-primary);
  color: var(--color-primary-content);
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

html {
  scroll-behavior: smooth;
}