/* ============================================================
   Nitosfritos Design System — "Warm Analog Kitchen"
   ============================================================ */

/* --- Color Tokens (Light Theme) --- */
:root {
  /* Primary — Terracotta */
  --color-primary-50:  #FDF5F0;
  --color-primary-100: #FAEADC;
  --color-primary-200: #F2CEAE;
  --color-primary-300: #E8AE7E;
  --color-primary-400: #D98B55;
  --color-primary-500: #C4703A;
  --color-primary-600: #A8582A;
  --color-primary-700: #8B4420;
  --color-primary-800: #6E351A;
  --color-primary-900: #4A2412;

  /* Secondary — Olive / Sage */
  --color-secondary-50:  #F5F7F0;
  --color-secondary-100: #E8EDDC;
  --color-secondary-200: #D0DABA;
  --color-secondary-300: #B1C28E;
  --color-secondary-400: #8FA66A;
  --color-secondary-500: #6B8A4E;
  --color-secondary-600: #556E3E;
  --color-secondary-700: #435632;
  --color-secondary-800: #334126;
  --color-secondary-900: #222D1A;

  /* Neutral — Warm Cream-shifted Grays */
  --color-neutral-50:  #FDFCF9;
  --color-neutral-100: #F8F5EF;
  --color-neutral-150: #F2EDE4;
  --color-neutral-200: #E8E1D5;
  --color-neutral-300: #D5CBBE;
  --color-neutral-400: #B5A898;
  --color-neutral-500: #8D7F6F;
  --color-neutral-600: #6B5E4F;
  --color-neutral-700: #4D4237;
  --color-neutral-800: #342C24;
  --color-neutral-900: #1E1A15;

  /* Accent — Burnt Sienna (favorites, hearts) */
  --color-accent-400: #D46A3F;
  --color-accent-500: #BF5530;
  --color-accent-600: #A24427;

  /* Semantic */
  --color-success-50:  #F0F7F0;
  --color-success-500: #4A8C4A;
  --color-success-600: #3B713B;

  --color-warning-50:  #FDF7ED;
  --color-warning-500: #D4920A;
  --color-warning-600: #B07A08;

  --color-error-50:  #FDF0EE;
  --color-error-500: #C53D2F;
  --color-error-600: #A33226;

  /* Surfaces */
  --color-surface:         #F8F5EF;
  --color-surface-raised:  #FFFFFF;
  --color-surface-overlay: rgba(30, 26, 21, 0.5);
  --bg-page: linear-gradient(165deg, #FDFCF9 0%, #F8F5EF 40%, #F2EDE4 100%);

  /* --- Typography --- */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "Source Code Pro", "Courier New", monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  --leading-tight:   1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.75;

  /* --- Spacing --- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* --- Shadows (warm brown translucency) --- */
  --shadow-xs:    0 1px 2px rgba(75, 50, 30, 0.06);
  --shadow-sm:    0 2px 4px rgba(75, 50, 30, 0.08);
  --shadow-md:    0 4px 12px rgba(75, 50, 30, 0.10);
  --shadow-lg:    0 8px 24px rgba(75, 50, 30, 0.12);
  --shadow-xl:    0 12px 40px rgba(75, 50, 30, 0.15);
  --shadow-2xl:   0 20px 60px rgba(75, 50, 30, 0.18);
  --shadow-inner: inset 0 2px 4px rgba(75, 50, 30, 0.06);
  --shadow-card:       0 2px 8px rgba(75, 50, 30, 0.08), 0 1px 3px rgba(75, 50, 30, 0.05);
  --shadow-card-hover: 0 8px 24px rgba(75, 50, 30, 0.14), 0 2px 6px rgba(75, 50, 30, 0.08);
  --shadow-float:      0 8px 32px rgba(75, 50, 30, 0.12), 0 2px 8px rgba(75, 50, 30, 0.06);

  /* --- Border Radius --- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;
  --radius-card:       14px 16px 16px 14px;
  --radius-card-image: 14px 16px 0 0;

  /* --- Durations & Easings --- */
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;

  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-gentle: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* --- Dark Mode Preparation --- */
.dark {
  --color-neutral-50:  #1E1A15;
  --color-neutral-100: #272219;
  --color-neutral-150: #312A20;
  --color-neutral-200: #3D3428;
  --color-neutral-300: #5A4E3F;
  --color-neutral-400: #7A6D5C;
  --color-neutral-500: #9E9080;
  --color-neutral-600: #BDB1A0;
  --color-neutral-700: #D5CBBE;
  --color-neutral-800: #E8E1D5;
  --color-neutral-900: #F8F5EF;

  --color-surface:        #1E1A15;
  --color-surface-raised: #272219;
  --color-surface-overlay: rgba(0, 0, 0, 0.6);
  --bg-page: linear-gradient(165deg, #1E1A15 0%, #272219 40%, #312A20 100%);

  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm:    0 2px 4px rgba(0, 0, 0, 0.25);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-xl:    0 12px 40px rgba(0, 0, 0, 0.4);
  --shadow-2xl:   0 20px 60px rgba(0, 0, 0, 0.45);
  --shadow-card:       0 2px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
  --shadow-float:      0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* --- Base Typography --- */
body {
  font-family: var(--font-body);
  color: var(--color-neutral-700);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-neutral-800);
  line-height: var(--leading-tight);
}

/* --- Keyframes --- */
@keyframes nf-shimmer {
  0%   { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

@keyframes nf-card-enter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes nf-page-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes nf-slide-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes nf-heartbeat {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

@keyframes nf-check-bounce {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes nf-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes nf-search-expand {
  from {
    opacity: 0;
    width: 60px;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    width: 350px;
    transform: scale(1);
  }
}

@keyframes nf-search-slide {
  from {
    opacity: 0;
    transform: translateX(100px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* --- Staggered Grid Entrance --- */
.nf-stagger-enter > * {
  animation: nf-card-enter var(--duration-slow) var(--ease-out) both;
}
.nf-stagger-enter > *:nth-child(1)  { animation-delay: 0ms; }
.nf-stagger-enter > *:nth-child(2)  { animation-delay: 60ms; }
.nf-stagger-enter > *:nth-child(3)  { animation-delay: 120ms; }
.nf-stagger-enter > *:nth-child(4)  { animation-delay: 180ms; }
.nf-stagger-enter > *:nth-child(5)  { animation-delay: 240ms; }
.nf-stagger-enter > *:nth-child(6)  { animation-delay: 300ms; }
.nf-stagger-enter > *:nth-child(7)  { animation-delay: 360ms; }
.nf-stagger-enter > *:nth-child(8)  { animation-delay: 420ms; }
.nf-stagger-enter > *:nth-child(9)  { animation-delay: 480ms; }
.nf-stagger-enter > *:nth-child(n+10) { animation-delay: 500ms; }

/* --- Texture Backgrounds --- */
.nf-paper-grain {
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

.nf-card-paper {
  background-color: var(--color-surface-raised);
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.015'/%3E%3C/svg%3E");
}

.nf-linen {
  background-color: var(--color-neutral-50);
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(75, 50, 30, 0.012) 2px,
      rgba(75, 50, 30, 0.012) 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(75, 50, 30, 0.01) 2px,
      rgba(75, 50, 30, 0.01) 4px
    );
}

/* --- Skeleton --- */
.nf-skeleton {
  background: linear-gradient(
    90deg,
    var(--color-neutral-150) 25%,
    var(--color-neutral-200) 50%,
    var(--color-neutral-150) 75%
  );
  background-size: 1000px 100%;
  animation: nf-shimmer 2s infinite linear;
  border-radius: var(--radius-sm);
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-neutral-100);
}
::-webkit-scrollbar-thumb {
  background: var(--color-neutral-300);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-neutral-100);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-neutral-400);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-neutral-300) var(--color-neutral-100);
}

/* --- Page animation --- */
.nf-page-enter {
  animation: nf-page-enter var(--duration-normal) var(--ease-gentle);
}

/* --- Heart animation utility --- */
.nf-heart-pulse {
  animation: nf-heartbeat 0.4s var(--ease-spring);
}