/* Borders, radii and shadow. The brand is almost flat: hairlines do the work,
   shadows are rare and warm, corners are gentle rather than pill-round —
   except for the outlined chips, which are true capsules. */

:root {
  /* Three radii, and nothing is ever square. Every corner in the brand is one of these. */
  --radius-soft: 6px;    /* images, inputs, small surfaces */
  --radius-card: 12px;   /* cards, panels, the glass notice */
  --radius-pill: 999px;  /* buttons and chips */
  --radius-image: var(--radius-soft);

  --border-width-hairline: 1px;
  --border-width-thin: 1.5px;
  --border-width-thick: 2px;

  /* Warm, low-contrast shadow. Never grey, never a hard drop. */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(36, 22, 17, 0.06);
  --shadow-sm: 0 2px 8px rgba(36, 22, 17, 0.07);
  --shadow-md: 0 10px 30px rgba(36, 22, 17, 0.10);
  --shadow-lg: 0 24px 60px rgba(36, 22, 17, 0.14);
  --shadow-inset-hairline: inset 0 0 0 1px var(--border-hairline);

  /* Two ways to protect type on a photograph, and only two:
     a flat scrim across the whole frame (the default), or a bottom gradient
     when the headline sits at the foot. Type is never boxed into a capsule. */
  --gradient-scrim-full: linear-gradient(rgba(36,22,17,0.58), rgba(36,22,17,0.58)); /* @kind other */
  --gradient-scrim-strong: linear-gradient(rgba(36,22,17,0.72), rgba(36,22,17,0.72)); /* @kind other */
  --gradient-protect-bottom: linear-gradient(to top, rgba(36,22,17,0.82) 0%, rgba(36,22,17,0.40) 34%, rgba(36,22,17,0) 68%); /* @kind other */

  /* Cream grounds. Gradients stay inside the cream family and stay almost invisible —
     a shift of one step, never a visible ramp. */
  --gradient-cream-soft: linear-gradient(180deg, #FBF6F0 0%, #F2E7DB 100%); /* @kind other */
  --gradient-cream-warm: linear-gradient(160deg, #F2E7DB 0%, #E9DACA 100%); /* @kind other */
  --gradient-cream-fade: linear-gradient(180deg, #F2E7DB 0%, #FBF6F0 55%, #F2E7DB 100%); /* @kind other */

  /* Glass is used once — on the small floating notification card */
  --blur-glass: blur(10px); /* @kind other */
  --glass-fill: rgba(242, 231, 219, 0.88);
  --glass-fill-dark: rgba(36, 22, 17, 0.72);
}