/* Design tokens — colours, shadows, motion, radii.
   Bumping the root font-size to 110% scales every rem-based size by ~+10%. */
:root {
    --bg:           #fdf6f3;
    --bg-warm:      #fbece9;
    --paper:        #fff9f5;
    --paper-edge:   #f3e1da;
    --blush:        #fbe5e9;
    --pink-100:     #fad4dc;
    --pink-200:     #f6b8c6;
    --pink-300:     #ec9bb0;
    --pink-400:     #d97a8b;
    --rose-deep:    #b25867;
    --wine:         #7c3a4a;
    --gold:         #c9a35c;

    /* Hins palette — used wherever a UI surface flips for the male role
       (envelopes addressed to Hins, days-counter when Hins is signed in,
       compose buttons when he's writing, etc.). Keep in sync with the rose
       tokens above. */
    --hins-blue:        #3a6dab;   /* primary deep blue (mirrors --rose-deep) */
    --hins-blue-soft:   #7fa6db;   /* lighter accent (mirrors --pink-300)     */
    --hins-blue-pale:   #d8e7f9;   /* surface tint (mirrors --pink-100)       */
    --hins-blue-tint:   #f3f9ff;   /* faintest wash (mirrors --blush)         */
    --hins-blue-edge:   #c5d6ec;   /* envelope border / hairline             */

    --ink:          #3a2a2c;
    --ink-soft:     #6e555a;
    --ink-faint:    #a18b8f;
    --hairline:     rgba(58,42,44,.10);
    --hairline-2:   rgba(58,42,44,.06);

    --shadow-card:  0 1px 0 rgba(255,255,255,.7) inset, 0 14px 40px -18px rgba(146,82,106,.28), 0 4px 12px -6px rgba(146,82,106,.18);
    --shadow-soft:  0 22px 60px -28px rgba(146,82,106,.30);

    --radius-lg:    22px;
    --radius-md:    14px;

    --t-fast:       180ms cubic-bezier(.2,.7,.2,1);
    --t-mid:        420ms cubic-bezier(.2,.7,.2,1);
    --t-slow:       780ms cubic-bezier(.2,.7,.2,1);
}

html { font-size: 110%; }
@media (max-width: 600px) { html { font-size: 105%; } }