@import "tailwindcss";

/* ══════════════════════════════════════════════════════════
   The Digital Curator — Design System Tokens
   BakeOps · Artisanal Operations for Modern Indian Kitchens
   ══════════════════════════════════════════════════════════ */

@theme {
  /* ── Primary: "Terracotta Core" ── */
  --color-primary: #752e19;
  --color-primary-container: #93452e;
  --color-on-primary: #ffffff;
  --color-on-primary-container: #ffc8b9;
  --color-primary-fixed: #ffdbd1;
  --color-primary-fixed-dim: #ffb5a0;
  --color-on-primary-fixed: #3b0900;
  --color-on-primary-fixed-variant: #78311b;

  /* ── Secondary: "Sage Leaf" ── */
  --color-secondary: #536253;
  --color-secondary-container: #d6e7d4;
  --color-on-secondary: #ffffff;
  --color-on-secondary-container: #596859;
  --color-secondary-fixed: #d6e7d4;
  --color-secondary-fixed-dim: #bbcbb9;
  --color-on-secondary-fixed: #111f13;
  --color-on-secondary-fixed-variant: #3c4a3c;

  /* ── Tertiary: "Warm Gold" ── */
  --color-tertiary: #735c00;
  --color-tertiary-container: #cca72f;
  --color-on-tertiary: #ffffff;
  --color-on-tertiary-container: #4e3d00;
  --color-tertiary-fixed: #ffe088;
  --color-tertiary-fixed-dim: #e9c349;
  --color-on-tertiary-fixed: #241a00;
  --color-on-tertiary-fixed-variant: #574500;

  /* ── Surface Tiers (The Depth Engine) ── */
  --color-background: #fff8f3;
  --color-on-background: #221a0f;
  --color-surface: #fff8f3;
  --color-on-surface: #221a0f;
  --color-on-surface-variant: #55433e;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #fff2e2;
  --color-surface-container: #fbecd8;
  --color-surface-container-high: #f5e6d3;
  --color-surface-container-highest: #f0e0cd;
  --color-surface-bright: #fff8f3;
  --color-surface-dim: #e7d8c5;
  --color-surface-variant: #f0e0cd;
  --color-surface-tint: #964730;

  /* ── Outline ── */
  --color-outline: #87726d;
  --color-outline-variant: #dac1ba;

  /* ── Error ── */
  --color-error: #ba1a1a;
  --color-error-container: #ffdad6;
  --color-on-error: #ffffff;
  --color-on-error-container: #93000a;

  /* ── Inverse ── */
  --color-inverse-surface: #382f22;
  --color-inverse-on-surface: #feeedb;
  --color-inverse-primary: #ffb5a0;

  /* ── Font Families ── */
  --font-headline: "Newsreader", serif;
  --font-body: "Plus Jakarta Sans", sans-serif;
  --font-label: "Plus Jakarta Sans", sans-serif;
  --font-mono: "Space Mono", monospace;
}

/* ── Artisan Gradient (Primary CTAs) ── */
.artisan-gradient {
  background: linear-gradient(135deg, #752e19 0%, #93452e 100%);
}

/* ── Glass Nav ── */
.glass-nav {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── Material Symbols ── */
.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  vertical-align: middle;
}

/* ── Ambient Shadow (Floating cards) ── */
.shadow-ambient {
  box-shadow: 0 12px 32px -4px rgba(34, 26, 15, 0.06);
}

/* ── BakeOps Input Class (Ghost Border pattern) ── */
.input {
  width: 100%;
  border: none;
  border-radius: 0.75rem;
  padding: 0.625rem 1rem;
  font-size: 1rem;
  background-color: #f0e0cd;
  color: #221a0f;
  transition: all 0.2s;
}

.input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(117, 46, 25, 0.2);
}

@media (min-width: 768px) {
  .input {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
  }
}

/* ── Range Slider ── */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  background: #dac1ba;
  height: 2px;
  border-radius: 9999px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 16px;
  width: 16px;
  background: #752e19;
  border-radius: 50%;
  margin-top: -7px;
}
input[type="range"]::-moz-range-track {
  background: #dac1ba;
  height: 2px;
  border-radius: 9999px;
}
input[type="range"]::-moz-range-thumb {
  height: 16px;
  width: 16px;
  background: #752e19;
  border-radius: 50%;
  border: none;
}

/* ── Custom scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #fff8f3; }
::-webkit-scrollbar-thumb { background: #dac1ba; border-radius: 10px; }

/* ── PWA Install Prompt Animation ── */
@keyframes slide-up {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-slide-up {
  animation: slide-up 0.3s ease-out forwards;
}