:root{
--space-1:4px;--space-2:6px;--space-3:8px;--space-4:10px;--space-5:12px;--space-6:14px;--space-7:16px;--space-8:20px;--space-9:24px;
--gutter:16px;--gutter-wide:20px;

--radius-tile:12px;     /* photo tiles, small chips, fields */
--radius-row:14px;      /* inset rows, dropdown items */
--radius-card:16px;     /* list cards */
--radius-card-lg:20px;  /* feature cards, widgets */
--radius-sheet:24px;    /* sheets, dialogs */
--radius-pill:100px;    /* pills, buttons */
--radius-phone:40px;

/* elevation = lighter edge, not cast shadow */
--ring:inset 0 0 0 1px var(--ring-rest);
--ring-hover:inset 0 0 0 1px rgba(184,239,0,0.35); /* @kind shadow */
--ring-selected:inset 0 0 0 1.5px var(--ring-accent-strong);
--ring-input:inset 0 0 0 1px var(--ring-field);
--sheet-lip:inset 0 1px 0 rgba(255,255,255,0.08); /* @kind shadow */
--shadow-menu:0 16px 40px rgba(0,0,0,0.6);
--shadow-phone:0 20px 60px rgba(0,0,0,0.5);

/* motion */
--ease-sheet:cubic-bezier(.22,.7,.3,1); /* @kind other */
--ease-carousel:cubic-bezier(.4,0,.2,1); /* @kind other */
--dur-fast:220ms; /* @kind other */
--dur-reveal:350ms; /* @kind other */
--dur-sheet:400ms; /* @kind other */
--dur-carousel:800ms; /* @kind other */
}
@keyframes cmWidgetRise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes cmRiseIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes cmSheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes cmPopIn{from{transform:scale(0.5);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes cmRingSweep{from{stroke-dashoffset:176}to{stroke-dashoffset:0}}