/* ==========================================================================
   Tastora — design tokens
   Source of truth: docs/recipe-community-components.html
   Ink-on-paper: warm-neutral base (paper/rule/ink) + charcoal and three
   accent hues (lime, sky, rose) held in reserve. Hierarchy comes from
   weight, size, fill vs. outline and spacing — not color.
   ========================================================================== */

:root {
  /* -- palette -- */
  --paper:      #F7F7F5;
  --paper-alt:  #ECEBE8;
  --rule:       #C3C1B9;
  --ink-faint:  #8B8983;
  --ink-soft:   #55534E;
  --ink:        #181816;
  --lime:       #80B918;
  --sky:        #89CFF1;
  --charcoal:   #404040;
  --rose:       #D55C5D;

  /* -- ink scale aliases -- */
  --ink-950: var(--ink);
  --ink-900: var(--ink);
  --ink-800: var(--charcoal);
  --ink-700: var(--charcoal);
  --ink-600: var(--ink-soft);
  --ink-500: var(--ink-soft);
  --ink-400: var(--ink-faint);
  --ink-300: var(--ink-faint);
  --ink-200: var(--rule);
  --ink-150: var(--rule);
  --ink-100: var(--paper-alt);
  --ink-050: var(--paper-alt);

  /* -- surface / line aliases -- */
  --paper-raised: var(--paper);
  --paper-sunken: var(--paper-alt);
  --line-subtle:  var(--rule);
  --line-default: var(--rule);
  --line-strong:  var(--ink);

  /* -- type -- */
  --font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* -- radius: tight and consistent, not pill-heavy -- */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* -- shadows: only for things that float above content -- */
  --shadow-float: 0 10px 30px rgba(24, 24, 22, 0.14);
  --shadow-soft:  0 2px 8px rgba(24, 24, 22, 0.06);

  /* -- spacing -- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* -- layout -- */
  --container-sm: 40rem;
  --container-md: 48rem;
  --container-lg: 64rem;
  --container-xl: 80rem;
  --header-height: 4rem;
  --mobile-nav-height: 4rem;

  /* -- z-index -- */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;

  /* -- motion -- */
  --duration-fast: 120ms;
  --duration-normal: 180ms;
  --duration-slow: 280ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
}

/* diagonal-line placeholder used everywhere a photo would sit */
.ph {
  background-image: repeating-linear-gradient(135deg, var(--ink-150) 0 1px, transparent 1px 9px);
  background-color: var(--paper-sunken);
}
.ph.dark {
  background-color: var(--ink-100);
  background-image: repeating-linear-gradient(135deg, var(--ink-300) 0 1px, transparent 1px 9px);
}