/* Mindprint design system — global tokens (dark canonical) */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap");

:root{
  /* Canvas — the void stage; the AI art is the only loud color */
  --mp-black:#000000;
  --mp-surface:#141416;   /* solid cards / panels */
  --mp-raise:#1E1E22;     /* pills, inputs, chips */
  --mp-nav:#0A0A0F;

  /* Ink */
  --mp-ink:#FFFFFF;
  --mp-dim:rgba(255,255,255,.72);
  --mp-mute:#8D8D93;     /* muted, but AA-readable on the raised surface */
  --mp-line:#2E2E33;
  --mp-line-soft:rgba(255,255,255,.14);

  /* Brand accent — the magenta→peach logo gradient */
  --mp-pink:#FB5EBE;      /* THE accent — links, actions, logo */
  --mp-pink-soft:#FF8FD4;
  --mp-peach:#FFC9A0;
  --mp-ink-on-pink:#160A11;
  --mp-brand-grad:linear-gradient(90deg,#FB5EBE 0%,#FF9BC0 55%,#FFCF9E 100%); /* @kind other */

  /* Pattern palette — every product's color comes from its AI art */
  --mp-art-1:#E4344B; --mp-art-2:#3E6BF5; --mp-art-3:#9FF04A;
  --mp-art-4:#F7C93A; --mp-art-5:#8B2FC9; --mp-art-6:#12C7C7; --mp-art-7:#FF6A2C;

  /* Type */
  --mp-display:"Space Grotesk","Helvetica Neue",Arial,sans-serif; /* @kind font */
  --mp-sans:"Space Grotesk","Helvetica Neue",system-ui,sans-serif; /* @kind font */
  --mp-mono:"Space Mono","SF Mono","JetBrains Mono",monospace; /* @kind font */

  /* Radius */
  --mp-r-card:14px;
  --mp-r-pill:999px;
}

/* The card pane's tint and its lit top edge (storefront.css, pattern.css). Registered here rather
   than beside either rule because these are the only two custom properties in the system that have
   to *animate*: a gradient cannot be transitioned, but a registered <number> inside one can, and
   the registration has to be in a sheet every page loads. */
@property --mp-pane-tint{syntax:"<number>";inherits:true;initial-value:0.3}
@property --mp-pane-lip{syntax:"<number>";inherits:true;initial-value:0.16}