/* Talenti design system, 9 of 10 in the network. Written from DESIGN.md.
   Ground: grey mocha. Sheet: sand. One bright colour: lime.
   Nothing here is shared with another site in the network. */

:root {
  /* ---- colour ------------------------------------------------------ */
  --ground: #574E46;          /* grey mocha, the ground of every poster   */
  --on-ground: #F2EDE6;       /* 6.98 on ground                          */
  --on-ground-muted: #D2C9BE; /* 4.97 on ground                          */

  --deep: #3A332D;            /* deep mocha: footer, open menu, panels   */
  --on-deep: #F2EDE6;         /* 10.66 on deep                           */
  --on-deep-muted: #C6BCB1;   /* 7.44 on deep                            */

  --sand: #EDE7DF;            /* sand sheet: long text, tables           */
  --on-sand: #332D27;         /* 11.06 on sand                           */
  --on-sand-muted: #6A6055;   /* 5.00 on sand                            */

  --lime: #B7D34A;            /* 4.81 on ground, 8.04 behind dark type   */
  --on-lime: #332D27;

  --outline: rgba(242, 237, 230, 0.22);
  --outline-strong: rgba(242, 237, 230, 0.50);
  --outline-sand: rgba(51, 45, 39, 0.22);
  --error: #E08573;
  --scrim: 26 22 19;          /* scrim colour, used as rgb(var(--scrim) / a) */
  --dim: 0.72;                /* default scrim weight; the build sets it per frame */

  /* ---- type -------------------------------------------------------- */
  --serif: 'Prata', 'Prata Fallback', Georgia, 'Times New Roman', serif;
  --sans: 'Work Sans', 'Work Sans Fallback', Arial, Helvetica, sans-serif;

  /* The display ceiling is 80px, not the 104px the first draft carried:
     next to 17px body text a 104px headline reads as two unrelated pages. */
  --display: clamp(34px, 5.2vw, 72px);
  --headline: clamp(27px, 3.6vw, 46px);
  --title: clamp(21px, 2.1vw, 28px);
  --body-lg: 18px;
  --body: 17px;               /* floor for running text                   */
  --small: 14px;              /* floor for captions, metas, table cells   */
  --label: 13px;              /* caps with 0.18em tracking, nothing below */

  /* ---- space ------------------------------------------------------- */
  --unit: 8px;
  --container: 1240px;
  --measure: 62ch;
  --gutter: 28px;
  --margin: clamp(16px, 3.6vw, 48px);
  --header: 88px;
  --header-stuck: 64px;

  /* ---- shape: rounded along the bottom only ------------------------ */
  --r-poster: 0 0 48px 48px;
  --r-control: 0 0 16px 16px;

  /* ---- motion ------------------------------------------------------ */
  --fast: 140ms;
  --mid: 260ms;
  --slow: 420ms;
  --in: cubic-bezier(0.22, 0.61, 0.36, 1);
  --out: cubic-bezier(0.55, 0, 0.75, 0.2);
}

@media (max-width: 767px) {
  :root {
    --gutter: 16px;
    --header: 60px;
    --header-stuck: 60px;
    --r-poster: 0 0 24px 24px;
    --r-control: 0 0 10px 10px;
  }
}