/* Дизайн-токены SheSpace — перенесены из макета без изменений.
 *
 * Менять значения здесь, а не в компонентах: палитра, типографика, шаг сетки,
 * форма арки, длительности анимаций и тени завязаны друг на друга.
 */
/* SheSpace colour system — six codes, warm brown on a light base.
   Distribution per design: 60% ivoor · 20% linnen · 15% cacao · 5% poeder/taupe. */
:root{
  /* base palette */
  --cacao:#653F29;
  --ivoor:#FEFDF9;
  --linnen:#EDE5DC;
  --poeder:#DCC4B8;
  --taupe:#A58773;
  --espresso:#3D281D;

  /* tints derived for hover / press / hairlines only — never new hues */
  --cacao-hover:#54341F;
  --cacao-press:#472B19;
  --linnen-deep:#E4D9CE;
  --poeder-soft:#E9D6CC;
  --taupe-soft:#C4AD9C;

  /* semantic surfaces */
  --surface-base:var(--ivoor);
  --surface-second:var(--linnen);
  --surface-card:var(--ivoor);
  --surface-card-on-linen:var(--ivoor);
  --surface-accent:var(--poeder);
  --surface-dark:var(--cacao);
  --surface-dark-deep:var(--espresso);

  /* semantic text */
  --text-heading:var(--cacao);
  --text-body:var(--espresso);
  --text-muted:var(--taupe);
  --text-label:var(--taupe);
  --text-on-dark:var(--ivoor);
  --text-on-dark-muted:#D9C7B9;
  --text-price:var(--cacao);

  /* lines & strokes */
  --line-hairline:rgba(165,135,115,.38);
  --line-strong:rgba(101,63,41,.35);
  --line-on-dark:rgba(254,253,249,.30);
  --icon-stroke:var(--cacao);

  /* interactive */
  --action-bg:var(--cacao);
  --action-fg:var(--ivoor);
  --action-bg-hover:var(--cacao-hover);
  --action-bg-press:var(--cacao-press);
  --action-quiet-bg:transparent;
  --action-quiet-border:var(--line-strong);
  --focus-ring:rgba(101,63,41,.45);
}

/* Two letters. Cormorant Garamond for heads, Manrope for everything read. */
:root{
  --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-text:"Manrope","Helvetica Neue",Arial,sans-serif;

  --weight-display:400; /* @kind font */          /* regular is the standard */
  --weight-display-medium:500; /* @kind font */   /* only when a smaller head needs hold */
  --weight-text:400; /* @kind font */
  --weight-label:500; /* @kind font */
  --weight-emphasis:600; /* @kind font */         /* sparingly */

  /* display / post heads — 90–122px in social artwork */
  --size-post-head:112px;
  --size-display-1:90px;
  --size-display-2:64px;
  --size-h1:44px;
  --size-h2:32px;
  --size-h3:24px;

  /* text */
  --size-post-text:28px;         /* 24–36px in artwork */
  --size-body-lg:18px;
  --size-body:16px;
  --size-body-sm:14px;
  --size-label:13px;             /* 19–23px in artwork, 13px on screen */
  --size-caption:12px;

  --leading-display:1.06; /* @kind font */
  --leading-head:1.15; /* @kind font */
  --leading-body:1.55; /* @kind font */
  --leading-tight:1.35; /* @kind font */

  --tracking-display:-0.005em; /* @kind font */
  --tracking-body:0; /* @kind font */
  --tracking-label:0.18em; /* @kind font */       /* letterspaced uppercase labels */
  --tracking-eyebrow:0.22em; /* @kind font */

  /* composed roles */
  --type-display:var(--weight-display) var(--size-display-1)/var(--leading-display) var(--font-display);
  --type-h1:var(--weight-display) var(--size-h1)/var(--leading-head) var(--font-display);
  --type-h2:var(--weight-display) var(--size-h2)/var(--leading-head) var(--font-display);
  --type-h3:var(--weight-display-medium) var(--size-h3)/var(--leading-tight) var(--font-display);
  --type-body-lg:var(--weight-text) var(--size-body-lg)/var(--leading-body) var(--font-text);
  --type-body:var(--weight-text) var(--size-body)/var(--leading-body) var(--font-text);
  --type-body-sm:var(--weight-text) var(--size-body-sm)/var(--leading-body) var(--font-text);
  --type-label:var(--weight-label) var(--size-label)/1.2 var(--font-text);
  --type-price:var(--weight-display) var(--size-h2)/1 var(--font-display);
}

/* 4px base. Air is the brand: prefer the larger step. */
:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;

  --gap-card:var(--space-6);
  --pad-card:var(--space-6);
  --pad-card-lg:var(--space-8);
  --pad-section:var(--space-20);
  --pad-page-x:var(--space-8);

  --measure-text:62ch; /* @kind spacing */     /* body copy never runs wider */
  --measure-narrow:42ch; /* @kind spacing */
  --page-max:1180px; /* @kind spacing */
}

/* The arch (de boog) is the shape language: round on top, straight below. */
:root{
  --radius-xs:4px;
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-xl:28px;
  --radius-pill:999px;
  --radius-card:var(--radius-md);
  --radius-tile:var(--radius-sm);

  /* arch: top corners fully round, bottom square */
  --arch:999px 999px 0 0; /* @kind radius */
  --arch-soft:140px 140px var(--radius-md) var(--radius-md); /* @kind radius */

  --border-hairline:1px solid var(--line-hairline);
  --border-strong:1px solid var(--line-strong);
  --border-on-dark:1px solid var(--line-on-dark);
  --stroke-icon:1.25px; /* @kind other */     /* all line icons share one weight */

  --ratio-post:4 / 5; /* @kind other */       /* feed */
  --ratio-story:9 / 16; /* @kind other */
  --ratio-photo-wide:3 / 2; /* @kind other */
}

/* Zonder haast. Motion is a fade and a few pixels — never a bounce. */
:root{
  --ease-standard:cubic-bezier(.4,0,.2,1); /* @kind other */
  --ease-out-soft:cubic-bezier(.22,.61,.36,1); /* @kind other */
  --ease-in-out-slow:cubic-bezier(.45,0,.25,1); /* @kind other */

  --dur-instant:120ms; /* @kind other */
  --dur-quick:180ms; /* @kind other */
  --dur-base:260ms; /* @kind other */
  --dur-slow:420ms; /* @kind other */
  --dur-reveal:640ms; /* @kind other */

  --transition-hover:background-color var(--dur-quick) var(--ease-standard),color var(--dur-quick) var(--ease-standard),border-color var(--dur-quick) var(--ease-standard),opacity var(--dur-quick) var(--ease-standard); /* @kind other */
  --transition-shape:transform var(--dur-base) var(--ease-out-soft),box-shadow var(--dur-base) var(--ease-out-soft); /* @kind other */
  --press-scale:0.985; /* @kind other */
  --lift-hover:-1px; /* @kind other */
}

/* Shadows are barely there: warm, wide, low opacity. No glans, no glow. */
:root{
  --shadow-none:none;
  --shadow-soft:0 1px 2px rgba(61,40,29,.04), 0 6px 18px rgba(61,40,29,.05);
  --shadow-card:0 2px 4px rgba(61,40,29,.04), 0 12px 32px rgba(61,40,29,.06);
  --shadow-raised:0 4px 8px rgba(61,40,29,.05), 0 20px 48px rgba(61,40,29,.09);
  --shadow-inset-hairline:inset 0 0 0 1px var(--line-hairline);

  /* protection gradient for type over photography */
  --scrim-bottom:linear-gradient(to top, rgba(61,40,29,.55), rgba(61,40,29,0) 62%); /* @kind other */
  --scrim-top:linear-gradient(to bottom, rgba(61,40,29,.40), rgba(61,40,29,0) 55%); /* @kind other */
  --veil-ivory:rgba(254,253,249,.78);
  --blur-veil:blur(10px); /* @kind other */
}