/* NOTE:
   Color tokens are RGB triplets.
   Always wrap with rgb(var(--token)).
*/

:root {
  --font-sans: 'Asap', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Bitter', Georgia, Cambria, 'Times New Roman', serif;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Typography scale */
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;

  /* Core palette */
  --background: 255 255 255; /* #ffffff */ 
  --foreground: 45 45 95; /* #2d2d5f */

  --muted: 245 245 245; /*#f5f5f5;*/
  --muted-foreground: 113 113 130; /* #717182;*/

  --primary: 76 77 145; /* #4c4d91; */
  --primary-foreground: 255 255 255; /* #ffffff;*/ 

  --secondary: 255 215 0; /*#ffd700;*/
  --secondary-foreground: 45 45 95; /*#2d2d5f;*/

  --secondary-accessible: 184 134 11; /*#b8860b - dark goldenrod for accessible contrast on white*/
  --secondary-accessible-foreground: 255 255 255; /*#ffffff;*/

  /* UI tokens */
  --border: 0 0 0 / 0.1;/* rgba(0, 0, 0, 0.1);*/
  --ring: 94 76 145; /*#5e4c91;*/
  --radius: 0.625rem;

  --card: 255 255 255; /* #ffffff;*/
  --card-foreground: 45 45 95; /*#2d2d5f;*/
}

/* Watermark */
.has-watermark::after {
  content: "";
  position: absolute;
  right: -64px;
  bottom: -64px;
  width: 520px;
  height: 520px;
  background: url("/assets/images/stock-allium-flower.jpeg") no-repeat bottom right / contain;
  opacity: 0.12;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 70% 70%, #000 0%, transparent 70%);
  mask-image: radial-gradient(circle at 70% 70%, #000 0%, transparent 70%);
}
@media (max-width: 768px) { .has-watermark::after { display: none; } }

/* Base application styling */
html, body {
  font-size: 18px; /* Increased from browser default 16px for better readability */
  background-color: rgb(var(--background));
  color: rgb(var(--foreground));
  font-family: var(--font-sans);
}