/* LCG Foods Design System, version 2. Materials and motion.
   What makes a screen feel made rather than coded: edges drawn with ink at low strength, shadows
   built in layers and kept for what floats, small corners, and motion that settles like a real
   object. No glow, aurora, glass, spotlight, gradient edge, dot grid or marquee (decision 102,
   research/AI-SLOP.md): they read as AI-made on every surface. Link after foundations.css.
   For the web, the app, social and screen decks. Print uses none of it except the pack shadow. */

:root {
  /* Radii. Concentric: a shape inside another is the outer radius minus the padding between them. */
  --radius-control: 6px;      /* inputs, selects, menu items */
  --radius-card: 4px;         /* cards, panels, image frames on screen: small, never soft (decision 102) */
  --radius-panel: 8px;        /* dialogs, the palette, menus: the things that float */
  --radius-hero: 8px;         /* full-width feature panels on the web */

  /* Edges: ink at low strength, so an edge sits on any ground without a new grey. */
  --edge: rgba(10,10,10,0.09);
  --edge-strong: rgba(10,10,10,0.16);
  --edge-on-ink: rgba(255,255,255,0.10);
  --highlight: inset 0 1px 0 rgba(255,255,255,0.65);      /* light catching the top edge */
  --highlight-on-ink: inset 0 1px 0 rgba(255,255,255,0.10);

  /* Elevation. Layered, warm-tinted, the way light really falls. Level 0 is flat on the page. */
  --shadow-color: 40 12% 8%;
  --elevation-1: 0 0.5px 1px hsl(var(--shadow-color) / 0.06), 0 1px 2px hsl(var(--shadow-color) / 0.05), 0 2px 4px -1px hsl(var(--shadow-color) / 0.04);
  --elevation-2: 0 0.5px 1px hsl(var(--shadow-color) / 0.06), 0 2px 4px -1px hsl(var(--shadow-color) / 0.06), 0 6px 12px -3px hsl(var(--shadow-color) / 0.07), 0 12px 24px -6px hsl(var(--shadow-color) / 0.06);
  --elevation-3: 0 0.5px 1px hsl(var(--shadow-color) / 0.08), 0 4px 8px -2px hsl(var(--shadow-color) / 0.08), 0 12px 24px -6px hsl(var(--shadow-color) / 0.12), 0 24px 48px -12px hsl(var(--shadow-color) / 0.14);
  --elevation-4: 0 1px 2px hsl(var(--shadow-color) / 0.08), 0 8px 16px -4px hsl(var(--shadow-color) / 0.10), 0 24px 48px -12px hsl(var(--shadow-color) / 0.20), 0 48px 96px -24px hsl(var(--shadow-color) / 0.24);

  /* Glows. Lime is a light source on ink, never a fill behind body text. */
  --glow-lime: 0 0 0 1px rgba(178,210,53,0.5), 0 8px 28px -6px rgba(178,210,53,0.55);
  --halo-lime: 0 0 0 4px rgba(178,210,53,0.42);              /* the focus halo around a field */
  --halo-error: 0 0 0 4px rgba(179,38,30,0.16);

  /* Motion. Things leave faster than they arrive. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);                 /* arrivals, reveals */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);              /* things that move from A to B */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);           /* small controls: a switch, a check */
  --motion-press: 100ms;
  --motion-quick: 160ms;
  --motion: 240ms;
  --motion-slow: 420ms;

  /* Grain: a whisper of film texture on ink and lime grounds, so flat colour feels printed. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─────────────────────────────── SURFACES ─────────────────────────────── */

/* A surface: white and a fine ink edge, flat on the page. Shadow only for what floats (--2, --3). */
.lcg-surface { background: var(--white); border-radius: var(--radius-card); box-shadow: 0 0 0 1px var(--edge); }
.lcg-surface--2 { box-shadow: 0 0 0 1px var(--edge), var(--elevation-2); }
.lcg-surface--3 { box-shadow: 0 0 0 1px var(--edge), var(--elevation-3); border-radius: var(--radius-panel); }
.lcg-surface--sunk { background: var(--stone-50); box-shadow: inset 0 1px 2px rgba(10,10,10,0.05), inset 0 0 0 1px var(--edge); }

/* Grain alone, for a lime or ink block that should feel printed. */
.lcg-grain { position: relative; isolation: isolate; }
/* On ink the grain is the same noise turned light and screened, or it vanishes into the black. */
.lcg--ink.lcg-grain::after, .lcg--ink .lcg-grain::after { filter: invert(1); mix-blend-mode: screen; opacity: 0.10; }
.lcg-grain::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--grain); opacity: 0.18; mix-blend-mode: multiply; border-radius: inherit; }

/* ─────────────────────────────── LAYOUT ─────────────────────────────── */

/* Bento: a grid of tiles in different sizes, each one idea. Tiles span with .lcg-tile--wide, --tall, --hero. */
.lcg-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(168px, auto); gap: 12px; }
.lcg-tile { grid-column: span 2; border-radius: var(--radius-panel); padding: 24px; background: var(--white); box-shadow: 0 0 0 1px var(--edge); display: grid; align-content: space-between; gap: 16px; overflow: hidden; position: relative; }
.lcg-tile--wide { grid-column: span 4; }
.lcg-tile--half { grid-column: span 3; }
.lcg-tile--tall { grid-row: span 2; }
.lcg-tile--hero { grid-column: span 4; grid-row: span 2; }
.lcg-tile--full { grid-column: 1 / -1; }
@media (max-width: 860px) { .lcg-bento { grid-template-columns: 1fr 1fr; } .lcg-tile, .lcg-tile--wide, .lcg-tile--half, .lcg-tile--hero { grid-column: span 2; } }

/* ─────────────────────────────── MOTION ─────────────────────────────── */

/* Reveal on scroll, where the browser supports scroll-driven animation. Elsewhere it simply shows. */
@supports (animation-timeline: view()) {
  .lcg-reveal { animation: lcg-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
}
@keyframes lcg-rise { from { opacity: 0; transform: translateY(24px) scale(0.985); } to { opacity: 1; transform: none; } }

/* Things that appear (a toast, a menu, a dialog) arrive from slightly below and slightly small. */
.lcg-arrive { transition: opacity var(--motion) var(--ease-out), transform var(--motion) var(--ease-out); }
@starting-style { .lcg-arrive { opacity: 0; transform: translateY(6px) scale(0.98); } }

@media (prefers-reduced-motion: reduce) {
  .lcg-reveal { animation: none !important; }
  .lcg-arrive { transition: none; }
}