/* Radii and motion — geometry and animation primitives.
   Radii stay in rem where they should scale; pill/circle are keywords. */

@layer tokens {
    :root {
        /* Corner radii */
        --radius-sm:     0.125rem;   /*   2 px — hairline rounded corners */
        --radius-md:     0.375rem;   /*   6 px — cards, inputs */
        --radius-lg:     0.75rem;    /*  12 px — modals, large surfaces */
        --radius-pill:   999px;      /* fully rounded ends — buttons, chips */
        --radius-circle: 50%;        /* true circle — avatars, dots */

        /* Durations */
        --dur-instant:   0ms;
        --dur-fast:      120ms;       /* hover tints, focus rings */
        --dur-base:      200ms;       /* transitions, small UI motion */
        --dur-slow:      360ms;       /* page transitions, larger shifts */

        /* Easings */
        --ease:           cubic-bezier(0.2, 0, 0, 1);   /* emphasized ease-out */
        --ease-in:        cubic-bezier(0.4, 0, 1, 1);
        --ease-out:       cubic-bezier(0, 0, 0.2, 1);
        --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
        --ease-linear:    linear;

        /* Elevation shadows — composed from semantic shadow-color tokens so
           hosts that rebind --color-ink get matching shadow tinting. */
        --shadow-sm:  0 1px 2px var(--color-shadow-soft);
        --shadow-md:  0 1px 2px var(--color-shadow-soft), 0 2px 8px var(--color-shadow-mid);
        --shadow-lg:  0 4px 16px var(--color-shadow-mid),  0 8px 32px var(--color-shadow-deep);
    }
}