/* ---- General Sans — display. Licence: ITF Free Font Licence -------------- */
@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans/GeneralSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans/GeneralSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans/GeneralSans-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---- Inter — body. Variable file, one request covers 400/500/600.
        Licence: SIL Open Font Licence 1.1 -------------------------------- */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/InterVariable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---- IBM Plex Mono — labels and meta. Licence: SIL OFL 1.1 -------------- */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {

  --font-display: "General Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", Arial, Helvetica, sans-serif;
  --font-mono:    "IBM Plex Mono", Consolas, "Courier New", monospace;

  --color-bg:            #F7F2EA;

  --color-bg-lift-1:     #F9F6F0;
  --color-bg-lift-2:     #FCFAF7;

  --color-bg-sink-1:     #F5F0E7;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #F0E7DA;

  --color-surface-stage: #F4EEE4;
  --color-surface-warm:  #E8D8C4;
  --color-surface-cool:  #F6E7DE;
  --color-surface-dark:  #272321;
  --color-surface-darker:#1C1917;

  --color-placeholder:   #3A3330;

  --color-text:          #272321;
  --color-body:          #5F554F;
  --color-muted:         #6B615C;
  --color-faint:         #8A7F77;
  --color-inverse:       #FFFFFF;
  --color-inverse-hover: #FFFFFF;
  --color-inverse-soft:  #C9BFB6;

  --color-inverse-muted: #9A8F87;

  --color-border:         rgba(39, 35, 33, .13);

  --color-border-hair:    rgba(39, 35, 33, .10);
  --color-border-soft:    rgba(39, 35, 33, .08);
  --color-border-strong:  rgba(39, 35, 33, .26);

  --color-border-inverse: rgba(255, 255, 255, .16);
  --color-border-inverse-strong: rgba(255, 255, 255, .34);

  --color-clay:          #C96F4A;
  --color-clay-deep:     #AA5335;
  --color-primary:       #AA5335;
  --color-primary-hover: #8F4429;
  --color-on-primary:    #FFFFFF;
  --color-nav-action:    #272321;
  --color-nav-action-hover: #3B3532;
  --color-accent:        #AA5335;
  --color-accent-on-sand:#8F4429;
  --color-accent-on-photo:#7A3A23;
  --color-clay-on-dark:  #D4805C;

  --color-clay-on-photo: #DE8E6C;
  --color-focus:         #AA5335;

  --status-clear:     #4E7A5E; --status-clear-field:     #E7EFE8; --status-clear-text:     #3E6B4E;
  --status-observed:  #5E6B72; --status-observed-field:  #EAEDEF; --status-observed-text:  #4A565D;
  --status-attention: #B5822F; --status-attention-field: #F6EDDC; --status-attention-text: #8A6320;
  --status-review:    #B14B3A; --status-review-field:    #F6E5E0; --status-review-text:    #A8402C;
  --status-noaccess:  #8A7F77; --status-noaccess-field:  #EFEAE2; --status-noaccess-text:  #5F554F;

  --color-row-tint:        var(--color-surface);

  --status-clear-soft:     #F2F6F2;
  --status-observed-soft:  #F3F5F6;
  --status-attention-soft: #FAF5EC;
  --status-review-soft:    #FAF1EE;
  --status-noaccess-soft:  #F6F3EF;

  --color-success: var(--status-clear);
  --color-danger:  var(--status-review);

  --grade-cine:
    linear-gradient(245deg,
      rgba(255, 241, 228, .14) 0%,
      rgba(255, 241, 228, .05) 22%,
      rgba(255, 241, 228, 0)  45%),
    radial-gradient(130% 105% at 50% 42%,
      rgba(15, 13, 12, 0)   45%,
      rgba(15, 13, 12, .20) 80%,
      rgba(15, 13, 12, .36) 100%);

  --scrim-hero: linear-gradient(90deg,
      rgba(24, 21, 20, .85) 0%,
      rgba(24, 21, 20, .79) 26%,
      rgba(24, 21, 20, .59) 46%,
      rgba(24, 21, 20, .34) 64%,
      rgba(24, 21, 20, .18) 82%,
      rgba(24, 21, 20, .13) 100%);

  --scrim-hero-narrow: linear-gradient(180deg,
      rgba(24, 21, 20, .12) 0%,
      rgba(24, 21, 20, .16) 20%,
      rgba(24, 21, 20, .22) 38%,
      rgba(24, 21, 20, .30) 54%,
      rgba(24, 21, 20, .38) 70%,
      rgba(24, 21, 20, .43) 86%,
      rgba(24, 21, 20, .45) 100%);

  --scrim-hero-copy: linear-gradient(180deg,
      rgba(24, 21, 20, 0)    0px,
      rgba(24, 21, 20, .04)  60px,
      rgba(24, 21, 20, .11) 130px,
      rgba(24, 21, 20, .21) 200px,
      rgba(24, 21, 20, .36) 260px,
      rgba(24, 21, 20, .50) 310px,
      rgba(24, 21, 20, .61) 350px,
      rgba(24, 21, 20, .67) 384px,
      rgba(24, 21, 20, .69) 100%);

  --scrim-hero-tablet: linear-gradient(90deg,
      rgba(24, 21, 20, .88) 0%,
      rgba(24, 21, 20, .84) 40%,
      rgba(24, 21, 20, .72) 62%,
      rgba(24, 21, 20, .46) 78%,
      rgba(24, 21, 20, .24) 92%,
      rgba(24, 21, 20, .16) 100%);

  --scrim-access: linear-gradient(90deg,
      rgba(24, 21, 20, .92) 0%,
      rgba(24, 21, 20, .84) 30%,
      rgba(24, 21, 20, .52) 52%,
      rgba(24, 21, 20, .22) 74%,
      rgba(24, 21, 20, .08) 100%),
    linear-gradient(0deg,
      rgba(24, 21, 20, .58) 0%,
      rgba(24, 21, 20, .22) 26%,
      transparent 46%);

  --scrim-panel:
    var(--grade-cine),
    linear-gradient(180deg,
      rgba(15, 13, 12, .74) 0px,
      rgba(15, 13, 12, .66) 380px,
      rgba(15, 13, 12, .34) 520px,
      rgba(15, 13, 12, .16) 68%,
      rgba(15, 13, 12, .20) 84%,
      rgba(15, 13, 12, .44) 100%);

  --vignette-panel:
    radial-gradient(162% 155% at 88% 82%,
      rgba(39, 35, 33, 0) 0%,
      rgba(39, 35, 33, .30) 53%,
      rgba(39, 35, 33, .90) 100%),
    radial-gradient(139% 111% at 50% 0%,
      rgba(39, 35, 33, 0) 0%,
      rgba(39, 35, 33, .85) 99%);

  --scrim-access-narrow: linear-gradient(0deg,
      rgba(24, 21, 20, .94) 0%,
      rgba(24, 21, 20, .88) 34%,
      rgba(24, 21, 20, .64) 58%,
      rgba(24, 21, 20, .36) 78%,
      rgba(24, 21, 20, .24) 100%);
}